React FunctionComponents and destructured params are incomprehensible

[WilliamJns]

Search terms

I'm using TypeDoc to document a Frontend project that was developed using ReactJS.

Unfortunately, TypeDoc cannot present the type of ReactJS component correctly in an understandable and clear form because react architecture uses object destructuring to use props object.

Source:

/**
 * Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 *
 * > Note: If you set the `dataGrid` component in the target model metadata (using ModelComponents decorator), this component will use it to render Test in it.
 *
 * See [[TestProps]] for more information.
 *
 * @category Component
 */
export const TestComponent: FunctionComponent<TestProps> = ({belongs, model, viewComponent, saveActions = true, showTitle = true, formProps, onGetRecords, children}) => {

    console.log('props', {belongs, model, viewComponent, saveActions, showTitle, formProps, onGetRecords, children});

    return (
        <React.Fragment>
            Component is rendered
        </React.Fragment>
    );
};

In more complex components, this problem will be even more annoying. Here is another complex component sample

I tried to use @param, but there was no difference in the generated document.

If you have an idea to solve this problem, please let me know.

Steps to reproduce the bug

I've created a sample project that you can use npm i & npm run build:docs to see
the above example result.

https://github.com/WilliamJns/typedoc-react-fc-sample

Environment

• Typedoc version: 3.8.3
• TypeScript version: 0.17.6
• Node.js version: 12.16.1
• OS: MacOS Catalina 10.15.4

[WilliamJns]

Example repo: https://github.com/WilliamJns/typedoc-react-fc-sample
Rendered document:

[boredstiff]

I'm hitting this issue as well - is there not a way to hide __namedParameters and just show the bulleted list?

[rihardsgravis]

Using typedoc@next this React component markup outputs clean docs including prop descriptions:

interface Props {
	foo: string
	bar?: (event: MouseEvent) => void
}

/**
 * Test component
 *
 * ```tsx
 * <Test>
 * ...
 * </test>
 * ```
 * @category Component
 * @param {object} __namedParameters Component properties
 */
const Test: FunctionComponent<Props> = ({
	/**
	 * @hidden
	 */
	children,
	/**
	 * @param {string} Foo - Foo description
	 */
	foo,
	/**
	 * @param {function} [Bar] - Bar description
	 */
	bar,
}) => {
	...
}

export default Test

[WilliamJns]

@rihardsgravis thanks, I will try it. But why do not receive property comments directly from Props generic type?

[WilliamJns]

I used your method and I think we still have the problem.

[Gerrit0]

So, mostly fixing this is pretty easy. Unfortunately it breaks this test:

/**
 * Destructuring function parameters.
 */
function drawText({text = '', location: [x, y] = [0, 0], bold = false}) { }

Properly fixing this requires a new type model, ObjectType which is essentially a clone of the DeclarationReflection model. This needs to happen anyways, it's required for library mode... I'll hopefully get it working tomorrow.

[Gerrit0]

In the current 0.20 beta this renders as:

... which is kind of better, but still not wonderful. There's really no point in having the initializer for this variable. It gets in the way more than being useful.

[Gerrit0]

0.20.1 renders this as:

Which is as good as I think this is going to get. We have a link to the interface, TypeDoc shows that there is an initializer, but not what it is..