Improve subcomponent exports

Fixes #324

Author: cgatian

src/__tests__/data/StatelessStaticComponentsExportVariation1.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface LabelProps {
+  /** title description */
+  title: string;
+}
+
+/** StatelessStaticComponents.Label description */
+const SubComponent = (props: LabelProps) => (
+  <div>My Property = {props.title}</div>
+);
+
+interface StatelessStaticComponentsProps {
+  /** myProp description */
+  myProp: string;
+}
+
+/** StatelessStaticComponents description */
+const StatelessStaticComponents = (props: StatelessStaticComponentsProps) => (
+  <div>My Property = {props.myProp}</div>
+);
+
+StatelessStaticComponents.Label = SubComponent;
+
+export { StatelessStaticComponents };

src/__tests__/data/StatelessStaticComponentsExportVariation2.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+interface LabelProps {
+  /** title description */
+  title: string;
+}
+
+/** StatelessStaticComponents.Label description */
+const SubComponent = (props: LabelProps) => (
+  <div>My Property = {props.title}</div>
+);
+
+interface StatelessStaticComponentsProps {
+  /** myProp description */
+  myProp: string;
+}
+
+/** StatelessStaticComponents description */
+function StatelessStaticComponents(props: StatelessStaticComponentsProps) {
+  return <div>My Property = {props.myProp}</div>;
+}
+
+StatelessStaticComponents.Label = SubComponent;
+
+export { StatelessStaticComponents };

src/__tests__/data/StatelessStaticComponentsNamedObjectExport.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface LabelProps {
+  /** title description */
+  title: string;
+}
+
+/** StatelessStaticComponents.Label description */
+const SubComponent = (props: LabelProps) => (
+  <div>My Property = {props.title}</div>
+);
+
+interface StatelessStaticComponentsProps {
+  /** myProp description */
+  myProp: string;
+}
+
+/** StatelessStaticComponents description */
+const StatelessStaticComponents = (props: StatelessStaticComponentsProps) => (
+  <div>My Property = {props.myProp}</div>
+);
+
+export const Components = {
+  StatelessStaticComponents,
+  SubComponent
+};

src/__tests__/parser.ts

@@ -240,6 +240,44 @@ describe('parser', () => {
     });
   });
 
+  it('should parse static exported components variation1', () => {
+    check('StatelessStaticComponentsExportVariation1', {
+      StatelessStaticComponents: {
+        myProp: { type: 'string' }
+      },
+      'StatelessStaticComponents.Label': {
+        title: { type: 'string' }
+      }
+    });
+  });
+
+  it('should parse static exported components variation2', () => {
+    check('StatelessStaticComponentsExportVariation2', {
+      StatelessStaticComponents: {
+        myProp: { type: 'string' }
+      },
+      'StatelessStaticComponents.Label': {
+        title: { type: 'string' }
+      }
+    });
+  });
+
+  it('should parse static sub components exported from named object', () => {
+    check(
+      'StatelessStaticComponentsNamedObjectExport',
+      {
+        StatelessStaticComponents: {
+          myProp: { type: 'string' }
+        },
+        SubComponent: {
+          title: { type: 'string' }
+        }
+      },
+      true,
+      ''
+    );
+  });
+
   it('should parse static sub components on class components', () => {
     check('ColumnWithStaticComponents', {
       Column: {

src/parser.ts

@@ -251,6 +251,61 @@ export class Parser {
     this.shouldIncludeExpression = Boolean(shouldIncludeExpression);
   }
 
+  public getTypeSymbol(exp: ts.Symbol) {
+    const declaration = exp.valueDeclaration || exp.declarations![0];
+    const type = this.checker.getTypeOfSymbolAtLocation(exp, declaration);
+    const typeSymbol = type.symbol || type.aliasSymbol;
+    return typeSymbol;
+  }
+
+  public isPlainObjectType(exp: ts.Symbol) {
+    let targetSymbol = exp;
+    if (exp.flags & ts.SymbolFlags.Alias) {
+      targetSymbol = this.checker.getAliasedSymbol(exp);
+    }
+    const declaration =
+      targetSymbol.valueDeclaration || targetSymbol.declarations![0];
+
+    if (ts.isClassDeclaration(declaration)) {
+      return false;
+    }
+
+    const type = this.checker.getTypeOfSymbolAtLocation(
+      targetSymbol,
+      declaration
+    );
+    // Confirm it's an object type
+    if (!(type.flags & ts.TypeFlags.Object)) {
+      return false;
+    }
+    const objectType = type as ts.ObjectType;
+    const isPlain = !!(
+      objectType.objectFlags &
+      (ts.ObjectFlags.Anonymous | ts.ObjectFlags.ObjectLiteral)
+    );
+    return isPlain;
+  }
+
+  /**
+   * Attempts to gather a symbol's exports.
+   * Some symbol's like `default` exports are aliased, so we need to get the real symbol.
+   * @param exp symbol
+   */
+  public getComponentExports(exp: ts.Symbol) {
+    let targetSymbol = exp;
+
+    if (targetSymbol.exports) {
+      return { symbol: targetSymbol, exports: targetSymbol.exports! };
+    }
+
+    if (exp.flags & ts.SymbolFlags.Alias) {
+      targetSymbol = this.checker.getAliasedSymbol(exp);
+    }
+    if (targetSymbol.exports) {
+      return { symbol: targetSymbol, exports: targetSymbol.exports };
+    }
+  }
+
   private getComponentFromExpression(exp: ts.Symbol) {
     const declaration = exp.valueDeclaration || exp.declarations![0];
     const type = this.checker.getTypeOfSymbolAtLocation(exp, declaration);
@@ -261,7 +316,6 @@ export class Parser {
     }
 
     const symbolName = typeSymbol.getName();
-
     if (
       (symbolName === 'MemoExoticComponent' ||
         symbolName === 'ForwardRefExoticComponent') &&
@@ -1238,7 +1292,6 @@ function computeComponentName(
   customComponentTypes: ParserOptions['customComponentTypes'] = []
 ) {
   const exportName = exp.getName();
-
   const statelessDisplayName = getTextValueOfFunctionProperty(
     exp,
     source,
@@ -1395,11 +1448,28 @@ function parseWithProgramProvider(
         return docs;
       }
 
-      const components = checker.getExportsOfModule(moduleSymbol);
+      const exports = checker.getExportsOfModule(moduleSymbol);
       const componentDocs: ComponentDoc[] = [];
+      const exportsAndMembers: ts.Symbol[] = [];
+
+      // Examine each export to determine if it's on object which may contain components
+      exports.forEach(exp => {
+        // Push symbol for extraction to maintain existing behavior
+        exportsAndMembers.push(exp);
+        // Determine if the export symbol is an object
+        if (!parser.isPlainObjectType(exp)) {
+          return;
+        }
+        const typeSymbol = parser.getTypeSymbol(exp);
+        if (typeSymbol?.members) {
+          typeSymbol.members.forEach(member => {
+            exportsAndMembers.push(member);
+          });
+        }
+      });
 
       // First document all components
-      components.forEach(exp => {
+      exportsAndMembers.forEach(exp => {
         const doc = parser.getComponentInfo(
           exp,
           sourceFile,
@@ -1411,12 +1481,13 @@ function parseWithProgramProvider(
           componentDocs.push(doc);
         }
 
-        if (!exp.exports) {
+        const componentExports = parser.getComponentExports(exp);
+        if (!componentExports) {
           return;
         }
 
         // Then document any static sub-components
-        exp.exports.forEach(symbol => {
+        componentExports.exports.forEach(symbol => {
           if (symbol.flags & ts.SymbolFlags.Prototype) {
             return;
           }
@@ -1439,7 +1510,9 @@ function parseWithProgramProvider(
 
           if (doc) {
             const prefix =
-              exp.escapedName === 'default' ? '' : `${exp.escapedName}.`;
+              componentExports.symbol.escapedName === 'default'
+                ? ''
+                : `${componentExports.symbol.escapedName}.`;
 
             componentDocs.push({
               ...doc,