Table of contents
Overview
structured-types plugin to extract react specific properties from typesript prop types. If you are using react-prop-types
, please see the react-prop-types plugin.
Getting started
1. Installation
$ npm install @structured-types/react-plugin --save-dev
2. Your API source file (Component.tsx):
import React, { FC } from 'react';
/**
* MyComponent properties.
*/
type OwnProps = {
/** stringProp description */
stringProp?: string,
/** numberProp description */
numberProp: number,
};
/**
* MyComponent special component
*/
const MyComponent: FC<OwnProps> = ({ stringProp }) => <div>{stringProp}</div>;
MyComponent.defaultProps = {
stringProp: 'test',
};
export default MyComponent;
3. Your documentation extraction
import { parseFiles } from '@structured-types/api';
import reactPlugin from '@structured-types/react-plugin';
const docs = parseFiles(['../src/components/Component.tsx'], {
plugins: [reactPlugin],
});
4. The result
{
"default": {
"name": "MyComponent",
"extension": "react",
"kind": 11,
"properties": [
{
"parent": "OwnProps",
"optional": true,
"name": "stringProp",
"kind": 1,
"description": "stringProp description",
"value": "test"
},
{
"parent": "OwnProps",
"name": "numberProp",
"kind": 2,
"description": "numberProp description"
}
]
}
}
Configuration
The react
typescript plugin exports some default properties, and you can also add or modify some of the other parsing options that will be specific only for the found react components. For other typescript/jsdoc types, the global options passed to parseFiles will still apply.
children
props.
Enable the By default, the plugin removes the children
property that is part of most react components, here is an example of how to re-enable the children
properties by disabling the default filter:
import { parseFiles } from '@structured-types/api';
import reactPlugin from '@structured-types/react-plugin';
const docs = parseFiles(['../src/components/Component.tsx'], {
plugins: [{ ...reactPlugin, filter: undefined }],
});
ParsePlugin
type
Plugin type - provides the plugin name and the type resolver
defined in @structured-types/api/packages/api/src/ts-utils.ts
properties
Name | Type | Parent | Default | Description |
---|---|---|---|---|
tsOptions |
ts.CompilerOptions | DocsOptions |
||
internalTypes |
Record <string , PropKind > |
ParseOptions |
internal types - libs by default includes classes such as String , Function ... |
|
extract |
string [] |
ParseOptions |
list of export names to be extracted. by default all exports are extracted | |
filter |
function (
|
ParseOptions |
filter properties function. By default filter out all props with ignore === true | |
maxDepth |
number |
ParseOptions |
6 |
max depth for extracting child props. |
collectHelpers |
boolean |
ParseOptions |
whether to save "helper" props that are used by the main parsed props if set to false will result in a smaller result set | |
collectGenerics |
boolean |
ParseOptions |
true |
whether to collect generics parameters |
collectParameters |
boolean |
ParseOptions |
true |
whether to collect function parameters |
collectParametersUsage |
boolean |
ParseOptions |
whether to collect function parameters usage locations within the function body | |
collectProperties |
boolean |
ParseOptions |
true |
whether to collect object/type properties |
collectInheritance |
boolean |
ParseOptions |
true |
whether to collect the inheritance properties |
collectExtension |
boolean |
ParseOptions |
true |
whether to collect the plugin/extension name |
collectDiagnostics |
boolean |
ParseOptions |
whether to collect errors/diagnostics | |
collectAliasName |
boolean |
ParseOptions |
true |
whether to collect alias names - for example: when imported default symbol from another file, this will be the import name |
collectInternals |
boolean |
ParseOptions |
whether to collect internal (typescript) symbols | |
plugins |
ParsePlugin [] |
ParseOptions |
installed plugins can modify default options and install type resolvers | |
scope |
"exports" | "all"
|
ParseOptions |
by default collects only the exported symbols | |
collectSourceInfo |
boolean | "body"
|
ParseOptions |
whether to collect the file path and the source code location for the symbol declarations. If set to 'body', the source will refer to the function body instead of the variable declaration. | |
collectInnerLocations |
boolean |
ParseOptions |
whether to collect the source code location for inner symbol declarations if set to true, the data will be collected in the loc prop |
|
moduleCallback |
function (module *: Symbolchecker *: TypeChecker) => void
|
ParseOptions |
callback with the parsed module. Can be used to retrieve additional information such as the imports of a file etc. | |
typesResolve* |
function (
|
type resolving custom function ie from a react component will return the props type if the plugin does not recognize the type, should return undefined | ||
pluginName |
string |
plugin name |