Finalize merge logic and add more tests

Author: Remo Vetere

packages/react-docgen/src/handlers/__tests__/__snapshots__/codeTypeHandler-test.ts.snap

@@ -1655,7 +1655,7 @@ exports[`codeTypeHandler > stateless TS component and variable type takes preced
     "description": "",
     "required": true,
     "tsType": {
-      "name": "string",
+      "name": "number | string",
     },
   },
 }

packages/react-docgen/src/handlers/codeTypeHandler.ts

@@ -81,7 +81,6 @@ function setPropDescriptor(
       return;
     }
     const type = getTSType(typeAnnotation, typeParams);
-
     const propName = getPropertyName(path);
 
     if (!propName) return;
@@ -90,14 +89,14 @@ function setPropDescriptor(
 
     if (propDescriptor.tsType) {
       const mergedType = mergeTSIntersectionTypes(
-        {
-          name: type.name,
-          required: !path.node.optional,
-        },
         {
           name: propDescriptor.tsType.name,
           required: propDescriptor.required,
         },
+        {
+          name: type.name,
+          required: !path.node.optional,
+        },
       );
 
       propDescriptor.tsType.name = mergedType.name;

packages/react-docgen/src/utils/__tests__/mergeTSIntersectionTypes-test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, test } from 'vitest';
+import mergeTSIntersectionTypes from '../mergeTSIntersectionTypes.js';
+
+describe('mergeTSIntersectionTypes', () => {
+  test('it merges two types correctly', () => {
+    const mergedType = mergeTSIntersectionTypes(
+      {
+        name: 'string',
+        required: true,
+      },
+      {
+        name: 'number',
+        required: true,
+      },
+    );
+
+    expect(mergedType).toEqual({
+      name: 'string | number',
+      required: true,
+    });
+  });
+
+  test('it ignores types of "never"', () => {
+    const mergedType = mergeTSIntersectionTypes(
+      {
+        name: 'string',
+        required: true,
+      },
+      {
+        name: 'never',
+        required: true,
+      },
+    );
+
+    expect(mergedType).toEqual({
+      name: 'string',
+      required: true,
+    });
+  });
+
+  test('if one of the types is "unknown", it overrides all other types', () => {
+    const mergedType = mergeTSIntersectionTypes(
+      {
+        name: 'string',
+        required: true,
+      },
+      {
+        name: 'unknown',
+        required: true,
+      },
+    );
+
+    expect(mergedType).toEqual({
+      name: 'unknown',
+      required: true,
+    });
+  });
+
+  test('if one of the types is NOT required, the merged one is NOT required too', () => {
+    const mergedType = mergeTSIntersectionTypes(
+      {
+        name: 'string',
+        required: true,
+      },
+      {
+        name: 'number',
+        required: false,
+      },
+    );
+
+    expect(mergedType).toEqual({
+      name: 'string | number',
+      required: false,
+    });
+  });
+});

packages/react-docgen/src/utils/getTSType.ts

@@ -340,8 +340,8 @@ function handleTSIntersectionType(
               elementsDedup[existingIndex] = {
                 key: property.key,
                 value: mergeTSIntersectionTypes(
-                  property.value,
                   existingProperty.value,
+                  property.value,
                 ),
               };
             }

packages/react-docgen/src/utils/mergeTSIntersectionTypes.ts

@@ -31,35 +31,30 @@ import type {
  * };
  */
 export default (
-  newType: TypeDescriptor<TSFunctionSignatureType>,
   existingType: TypeDescriptor<TSFunctionSignatureType>,
+  newType: TypeDescriptor<TSFunctionSignatureType>,
 ): TypeDescriptor<TSFunctionSignatureType> => {
-  const newTypeIsForbiddenToUse = ['never'].includes(newType.name);
+  const required =
+    newType.required === false || existingType.required === false
+      ? false
+      : existingType.required;
 
-  if (newTypeIsForbiddenToUse) {
-    let mergedType = {
-      ...existingType,
-      required:
-        newType.required === false || existingType.required === false
-          ? false
-          : existingType.required,
-    };
+  const existingTypesArray = existingType.name.split('|').map((t) => t.trim());
+  const existingTypes = new Set(existingTypesArray);
 
-    if ('nullable' in existingType) {
-      mergedType = {
-        ...mergedType,
-        nullable: newType.nullable === true ? true : existingType.nullable,
-      };
-    }
+  if (!['never'].includes(newType.name)) {
+    existingTypes.add(newType.name);
+  }
 
-    return mergedType;
+  if (existingType.name === 'unknown' || newType.name === 'unknown') {
+    return {
+      name: 'unknown',
+      required,
+    };
   }
 
   return {
-    ...newType,
-    required:
-      newType.required === false || existingType.required === false
-        ? false
-        : existingType.required,
+    name: Array.from(existingTypes).join(' | '),
+    required,
   };
 };