UNPKG

@structured-types/react-plugin

Version:
127 lines (95 loc) 166 kB
# Table of contents - [Overview](#overview) - [Getting started](#getting-started) - - [1. Installation](#1-installation) - [2. Your API source file (Component.tsx):](#2-your-api-source-file-componenttsx) - [3. Your documentation extraction](#3-your-documentation-extraction) - [4. The result](#4-the-result) - [Configuration](#configuration) - [Enable the `children` props.](#enable-the-children-props) - [ParsePlugin](#parseplugin) # Overview [structured-types](https://github.com/ccontrols/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](https://github.com/ccontrols/structured-types/tree/master/plugins/react-prop-types) plugin. # Getting started ### 1. Installation ```bash $ npm install @structured-types/react-plugin --save-dev ``` ### 2. Your API source file (Component.tsx): ```js 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 ```ts 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 ```json { "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. ## Enable the `children` props. 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 }], }); <api-readme files="../../packages/api/src/ts-utils.ts" extract="ParsePlugin"/> <!-- START-API-README --> ## ParsePlugin **`type`** Plugin type - provides the plugin name and the type resolver _defined in [@structured-types/api/packages/api/src/ts-utils.ts](https://github.com/ccontrols/structured-types/tree/master/packages/api/src/ts-utils.ts#L318)_ **properties** | Name | Type | Parent | Default | Description | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `tsOptions` | ts.CompilerOptions | `DocsOptions` | | | | `internalTypes` | `Record`&lt;`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** (<br /><details><summary>`prop`\*</summary><blockquote>`kind`: <br />`name`: `string`<br />`alias`: `string`<br /><details><summary>`parent`</summary><blockquote>`name`\*: `string`<br />`loc`: SourceLocation</blockquote></details><details><summary>`loc`</summary><blockquote>`filePath`: `string`<br />`loc`: SourcePositions</blockquote></details>`optional`: `boolean`<br />`readonly`: `boolean`<br />`abstract`: `boolean`<br />`async`: `boolean`<br />`visibility`: `"private"` \| `"protected"` \| `"public"`<br />`static`: `boolean`<br />`type`: `string`<br />`extension`: `string`<br />`description`: `string`<br />`fires`: `string`\[]<br />`see`: `string`\[]<br />`examples`: `JSDocExample`\[]<br />`tags`: `JSDocPropTag`\[]<br />`summary`: `string`<br />`deprecated`: `string` \| `true`<br />`ignore`: `boolean`<br />`usage`: `type`\[]</blockquote></details>) => `boolean` | `ParseOptions` | | filter properties function. By default filter out all props with ignore === true | | `maxDepth` | `number`