在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:reactjs/react-docgen开源软件地址:https://github.com/reactjs/react-docgen开源编程语言:TypeScript 93.0%开源软件介绍:react-docgen
It uses ast-types and @babel/parser to parse the source into an AST and provides methods to process this AST to extract the desired information. The output / return value is a JSON blob / JavaScript object. It provides a default implementation for React components defined via
InstallInstall the module with yarn or npm:
CLIInstalling the module adds a
By default, Have a look at
APIThe tool can be used programmatically to extract component information and customize the extraction process: var reactDocs = require('react-docgen');
var componentInfo = reactDocs.parse(src); As with the CLI, this will look for the exported component created through
parse(source [, resolver [, handlers [, options]]])sourceType: The source text that react-docgen will try to extract the documentation from. resolverType: Given an AST and a reference to the parser, it returns an (array of) NodePath which represents the component definition. Built-in resolvers are available under the handlersType: Each function is called with a options∙ filenameType: The absolute path to the file associated with the code currently being parsed, if there is one. This is used to search for the correct babel config. This option is optional, but it is highly recommended to set it when integrating ∙ cwdType: The working directory that babel configurations will be searched in. ∙ babelrc, babelrcRoots, root, rootMode, configFile, envNameType: These options, will be passed directly to ∙ parserOptionsType: This options will be directly supplied to resolverThe resolver's task is to extract those parts from the source code which the handlers can analyze. For example, the var Component = React.createClass(<def>);
module.exports = Component;
// or
class Component extends React.Component {
// ...
}
module.exports = Component; and returns the ObjectExpression to which
This makes it easy, together with the utility methods created to analyze the AST, to introduce new or custom resolver methods. For example, a resolver could look for plain ObjectExpressions with a handlersHandlers do the actual work and extract the desired information from the result the resolver returned. Like the resolver, they try to delegate as much work as possible to the reusable utility functions. For example, while the
Guidelines for default resolvers and handlers
PropTypesExampleFor the following component import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**
* General component description.
*/
class MyComponent extends Component {
render() {
// ...
}
}
MyComponent.propTypes = {
/**
* Description of prop "foo".
*/
foo: PropTypes.number.isRequired,
/**
* Description of prop "bar" (a custom validation function).
*/
bar: function(props, propName, componentName) {
// ...
},
baz: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};
MyComponent.defaultProps = {
bar: 21,
};
export default MyComponent; we are getting this output: {
"props": {
"foo": {
"type": {
"name": "number"
},
"required": true,
"description": "Description of prop \"foo\"."
},
"bar": {
"type": {
"name": "custom"
},
"required": false,
"description": "Description of prop \"bar\" (a custom validation function).",
"defaultValue": {
"value": "21",
"computed": false
}
},
"baz": {
"type": {
"name": "union",
"value": [
{
"name": "number"
},
{
"name": "string"
}
]
},
"required": false,
"description": ""
}
},
"description": "General component description."
} Flow and TypeScript supportIf you are using flow or typescript then react-docgen can also extract the type annotations. As flow and typescript have way more advanced and fine granular type systems, the returned types from react-docgen are different in comparison when using
ExampleFor the following component with Flow types import React, { Component } from 'react';
type Props = {
/** Description of prop "foo". */
primitive: number,
/** Description of prop "bar". */
literalsAndUnion: 'string' | 'otherstring' | number,
arr: Array<any>,
func?: (value: string) => void,
noParameterName?: string => void,
obj?: { subvalue: ?boolean },
};
/**
* General component description.
*/
export default class MyComponent extends Component<void, Props, void> {
props: Props;
render(): ?ReactElement {
// ...
}
} we are getting this output: {
"description": "General component description.",
"props": {
"primitive": {
"flowType": { "name": "number" },
"required": true,
"description": "Description of prop \"foo\"."
},
"literalsAndUnion": {
"flowType": {
"name": "union",
"raw": "'string' | 'otherstring' | number",
"elements": [
{ "name": "literal", "value": "'string'" },
{ "name": "literal", "value": "'otherstring'" },
{ "name": "number" }
]
},
"required": true,
"description": "Description of prop \"bar\"."
},
"arr": {
"flowType": {
"name": "Array",
"elements": [{ "name": "any" }],
"raw": "Array<any>"
},
"required": true
},
"func": {
"flowType": {
"name": "signature",
"type": "function",
"raw": "(value: string) => void",
"signature": {
"arguments": [{ "name": "value", "type": { "name": "string" } }],
"return": { "name": "void" }
}
},
"required": false
},
"noParameterName": {
"flowType": {
"name": "signature",
"type": "function",
"raw": "string => void",
"signature": {
"arguments": [{ "name": "", "type": { "name": "string" } }],
"return": { "name": "void" }
}
},
"required": false
},
"obj": {
"flowType": {
"name": "signature",
"type": "object",
"raw": "{ subvalue: ?boolean }",
"signature": {
"properties": [
{
"key": "subvalue",
"value": {
"name": "boolean",
"nullable": true,
"required": true
}
}
]
}
},
"required": false
}
}
} TypesHere is a list of all the available types and its result structure.
Result data structureThe structure of the JSON blob / JavaScript object is as follows:
(
|
2022-08-15
2022-08-17
2022-09-23
2023-10-27
2022-08-18
请发表评论