Nested type descriptions

[neutraali]

Sorry if this has been reported before in some form before, but is there currently support for nested type descriptions? For example, given the following structure (using Flow and react-docgen@5.3.1):

type Panel = {
	/** Panel title */
	title: string,
	/** Panel content */
	content: string,
	/** Sublevels of more Panels */
	panels: Array<Panel>
};

type Props = {
	/** One or more toggleable Panels */
	panels: Array<Panel>
}

/** Hello World! */
const Component = (props: Props) => { ... }

^ Does not generate any description for the Panel -props. Is this intentional? The output for a Panel is:

{
	"name": "signature",
	"type": "object",
	"raw": "{ ... }",
	"signature": {
		"properties": [
			{
				"key": "title",
				"value": {
					"name": "string",
					"required": true
				}
			},
			{
				"key": "content",
				"value": {
					"name": "string",
					"required": true
				}
			},
			{
				"key": "panels",
				"value": {
					"name": "Array",
					"elements": [{ "name": "Panel" }],
					"raw": "Array<Panel>",
					"required": true
				}
			}
		]
	}
}

[kevin-krug]

just would like to add my +1 here, in typescript nested interfaces seem to not be resolved currently.

if this is not already supported, I'd request for the output of the parse function to include the nested props, also in case of nested interfaces. 🙏

E.g. both below cases should yield the same output:

case 1. without nested interface

interface Props {
  prop: {
    nestedProp: string
  }
}

const Component = (prop: Props) => {
  return <div />;
}

current output (expected output also for case 2.)
=>

[
  {
    "description": "",
    "displayName": "Component",
    "methods": [],
    "props": {
      "prop": {
        "required": true,
        "tsType": {
          "name": "signature",
          "type": "object",
          "raw": "{\n  nestedProp: string\n}",
          "signature": {
            "properties": [
              {
                "key": "nestedProp",
                "value": {
                  "name": "string",
                  "required": true
                }
              }
            ]
          }
        },
        "description": ""
      }
    }
  }
]

VS.

case 2. with nested interface

interface Props {
  prop: NestedProp
}

interface NestedProp {
  nestedProp: string
}

const Component = (prop: Props) => {
  return <div />;
}

=>

[
  {
    "description": "",
    "displayName": "Component",
    "methods": [],
    "props": {
      "prop": {
        "required": true,
        "tsType": {
          "name": "NestedProp"
        },
        "description": ""
      }
    }
  }
]

[danez]

just would like to add my +1 here, in typescript nested interfaces seem to not be resolved currently.

if this is not already supported, I'd request for the output of the parse function to include the nested props, also in case of nested interfaces. 🙏

When TypeScript support was implemented there was the decision made to handle interfaces different than object types and type aliases. The reason was that interfaces might be documented separately and linked from the component docs. I can see that use case but also think that the same could apply for object types or enums. So it might be nice to find a way to allow this will still documenting everything.

What I'm thinking of is to handle interfaces and object types exactly the same, except to somehow make it clear that it is an interface. In addition it might be interesting to add a referenceName, so that in the end the name of the interface/typealias is still known.

Maybe something like this for your example above. Would that work for you?

"tsType": {
          "name": "signature",
          "referenceName" : "NestedProp", 
          "type": "interface",
          ...
}

[danez]

Sorry if this has been reported before in some form before, but is there currently support for nested type descriptions? For example, given the following structure (using Flow and react-docgen@5.3.1):

type Panel = {
	/** Panel title */
	title: string,
	/** Panel content */
	content: string,
	/** Sublevels of more Panels */
	panels: Array<Panel>
};

type Props = {
	/** One or more toggleable Panels */
	panels: Array<Panel>
}

/** Hello World! */
const Component = (props: Props) => { ... }

^ Does not generate any description for the Panel -props. Is this intentional? The output for a Panel is:

{
	"name": "signature",
	"type": "object",
	"raw": "{ ... }",
	"signature": {
		"properties": [
			{
				"key": "title",
				"value": {
					"name": "string",
					"required": true
				}
			},
			{
				"key": "content",
				"value": {
					"name": "string",
					"required": true
				}
			},
			{
				"key": "panels",
				"value": {
					"name": "Array",
					"elements": [{ "name": "Panel" }],
					"raw": "Array<Panel>",
					"required": true
				}
			}
		]
	}
}

This issue with flow and missing descriptions will be fixed in the next release. see #810