react-docgen
Advanced tools
Comparing version 4.0.1 to 4.1.0
@@ -10,2 +10,4 @@ "use strict"; | ||
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread")); | ||
@@ -32,8 +34,4 @@ | ||
function buildOptions({ | ||
cwd, | ||
filename, | ||
parserOptions | ||
}) { | ||
let options = { | ||
function buildOptions(parserOptions, babelOptions) { | ||
let parserOpts = { | ||
plugins: [] | ||
@@ -43,3 +41,3 @@ }; | ||
if (parserOptions) { | ||
options = (0, _objectSpread2.default)({}, parserOptions, { | ||
parserOpts = (0, _objectSpread2.default)({}, parserOptions, { | ||
plugins: parserOptions.plugins ? [...parserOptions.plugins] : [] | ||
@@ -49,9 +47,6 @@ }); | ||
const partialConfig = babel.loadPartialConfig({ | ||
cwd, | ||
filename | ||
}); | ||
const partialConfig = babel.loadPartialConfig(babelOptions); | ||
if (!partialConfig.hasFilesystemConfig() && options.plugins.length === 0) { | ||
options.plugins = [...defaultPlugins]; | ||
if (!partialConfig.hasFilesystemConfig() && parserOpts.plugins.length === 0) { | ||
parserOpts.plugins = [...defaultPlugins]; | ||
} // Recast needs tokens to be in the tree | ||
@@ -61,18 +56,18 @@ // $FlowIssue tokens is clearly in the Options | ||
options.tokens = true; // Ensure we always have estree plugin enabled, if we add it a second time | ||
parserOpts.tokens = true; // Ensure we always have estree plugin enabled, if we add it a second time | ||
// here it does not matter | ||
options.plugins.push('estree'); | ||
return options; | ||
parserOpts.plugins.push('estree'); | ||
return parserOpts; | ||
} | ||
function buildParse(options = {}) { | ||
const parserOpts = buildOptions(options); | ||
const parserOptions = options.parserOptions, | ||
babelOptions = (0, _objectWithoutProperties2.default)(options, ["parserOptions"]); | ||
const parserOpts = buildOptions(parserOptions, babelOptions); | ||
return { | ||
parse(src) { | ||
return babel.parseSync(src, { | ||
parserOpts, | ||
cwd: options.cwd, | ||
filename: options.filename | ||
}); | ||
return babel.parseSync(src, (0, _objectSpread2.default)({ | ||
parserOpts | ||
}, babelOptions)); | ||
} | ||
@@ -79,0 +74,0 @@ |
{ | ||
"name": "react-docgen", | ||
"version": "4.0.1", | ||
"version": "4.1.0", | ||
"description": "A CLI and toolkit to extract information from React components for documentation generation.", | ||
@@ -27,3 +27,3 @@ "repository": { | ||
"fix": "eslint . --fix --report-unused-disable-directives", | ||
"prepublish": "yarn build", | ||
"prepare": "yarn build", | ||
"preversion": "yarn lint", | ||
@@ -30,0 +30,0 @@ "start": "cd website && yarn && yarn start", |
165
README.md
@@ -26,3 +26,2 @@ # react-docgen [![Build Status](https://travis-ci.org/reactjs/react-docgen.svg?branch=master)](https://travis-ci.org/reactjs/react-docgen) | ||
## CLI | ||
@@ -89,3 +88,3 @@ | ||
| handlers | Array\<function\> | An array of functions of the form `(documentation: Documentation, definition: NodePath) => void`. Each function is called with a `Documentation` object and a reference to the component definition as returned by `resolver`. Handlers extract relevant information from the definition and augment `documentation`. | | ||
| options | Object | Pass options to react-docgen, see below. | | ||
| opt | ||
@@ -109,2 +108,10 @@ #### options | ||
##### ∙ babelrc, babelrcRoots, root, rootMode, configFile, envName | ||
Type: `boolean` | ||
Default: `true` | ||
These options, will be passed directly to `babel` for locating and resolving a local config or babelrc. To see | ||
documentation for each option consult the [babel website](https://babeljs.io/docs/en/options#config-loading-options). | ||
##### ∙ parserOptions | ||
@@ -135,3 +142,3 @@ | ||
`findAllComponentDefinitions` works similarly, but finds *all* `React.createClass` calls and class definitions, not only the one that is exported. | ||
`findAllComponentDefinitions` works similarly, but finds _all_ `React.createClass` calls and class definitions, not only the one that is exported. | ||
@@ -152,3 +159,3 @@ 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 `render` method. | ||
- When using `React.createClass`, the component definition (the value passed to it) must resolve to an object literal. | ||
- When using classes, the class must either `extend React.Component` *or* define a `render()` method. | ||
- When using classes, the class must either `extend React.Component` _or_ define a `render()` method. | ||
- `propTypes` must be an object literal or resolve to an object literal in the same file. | ||
@@ -187,10 +194,7 @@ - The `return` statement in `getDefaultProps` must contain an object literal. | ||
}, | ||
baz: PropTypes.oneOfType([ | ||
PropTypes.number, | ||
PropTypes.string | ||
]), | ||
baz: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
}; | ||
MyComponent.defaultProps = { | ||
bar: 21 | ||
bar: 21, | ||
}; | ||
@@ -272,3 +276,2 @@ | ||
export default class MyComponent extends Component<void, Props, void> { | ||
props: Props; | ||
@@ -286,73 +289,67 @@ | ||
{ | ||
"description":"General component description.", | ||
"props":{ | ||
"primitive":{ | ||
"flowType":{ "name":"number" }, | ||
"required":true, | ||
"description":"Description of prop \"foo\"." | ||
"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" } | ||
"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\"." | ||
"required": true, | ||
"description": "Description of prop \"bar\"." | ||
}, | ||
"arr":{ | ||
"flowType":{ | ||
"name":"Array", | ||
"elements":[ | ||
{ "name":"any" } | ||
], | ||
"raw":"Array<any>" | ||
"arr": { | ||
"flowType": { | ||
"name": "Array", | ||
"elements": [{ "name": "any" }], | ||
"raw": "Array<any>" | ||
}, | ||
"required":true | ||
"required": true | ||
}, | ||
"func":{ | ||
"flowType":{ | ||
"name":"signature", | ||
"type":"function", | ||
"raw":"(value: string) => void", | ||
"signature":{ | ||
"arguments":[ | ||
{ "name":"value", "type":{ "name":"string" } } | ||
], | ||
"return":{ "name":"void" } | ||
"func": { | ||
"flowType": { | ||
"name": "signature", | ||
"type": "function", | ||
"raw": "(value: string) => void", | ||
"signature": { | ||
"arguments": [{ "name": "value", "type": { "name": "string" } }], | ||
"return": { "name": "void" } | ||
} | ||
}, | ||
"required":false | ||
"required": false | ||
}, | ||
"noParameterName":{ | ||
"flowType":{ | ||
"name":"signature", | ||
"type":"function", | ||
"raw":"string => void", | ||
"signature":{ | ||
"arguments":[ | ||
{ "name":"", "type":{ "name":"string" } } | ||
], | ||
"return":{ "name":"void" } | ||
"noParameterName": { | ||
"flowType": { | ||
"name": "signature", | ||
"type": "function", | ||
"raw": "string => void", | ||
"signature": { | ||
"arguments": [{ "name": "", "type": { "name": "string" } }], | ||
"return": { "name": "void" } | ||
} | ||
}, | ||
"required":false | ||
"required": false | ||
}, | ||
"obj":{ | ||
"flowType":{ | ||
"name":"signature", | ||
"type":"object", | ||
"raw":"{ subvalue: ?boolean }", | ||
"signature":{ | ||
"properties":[ | ||
"obj": { | ||
"flowType": { | ||
"name": "signature", | ||
"type": "object", | ||
"raw": "{ subvalue: ?boolean }", | ||
"signature": { | ||
"properties": [ | ||
{ | ||
"key":"subvalue", | ||
"value":{ | ||
"name":"boolean", | ||
"nullable":true, | ||
"required":true | ||
"key": "subvalue", | ||
"value": { | ||
"name": "boolean", | ||
"nullable": true, | ||
"required": true | ||
} | ||
@@ -363,3 +360,3 @@ } | ||
}, | ||
"required":false | ||
"required": false | ||
} | ||
@@ -374,14 +371,14 @@ } | ||
Name | Examples | Result | ||
------------- | ------------- | ------------- | ||
Simple | ```let x: string;```<br />```let x: number;```<br />```let x: boolean;```<br />```let x: any;```<br />```let x: void;```<br />```let x: Object;```<br />```let x: String;```<br />```let x: MyClass;``` | ```{ "name": "<type>" }``` | ||
Literals | ```let x: 'foo';```<br />```let x: 1;```<br />```let x: true;``` | ```{ "name": "literal", "value": "<rawvalue>" }``` | ||
Typed Classes | ```let x: Array<foo>;```<br />```let x: Class<foo>;```<br />```let x: MyClass<bar>;``` | ```{ "name": "<type>", "elements": [{ <element-type> }, ...] }``` | ||
Object Signature | ```let x: { foo: string, bar?: mixed };```<br />```let x: { [key: string]: string, foo: number };``` | ```{ "name": "signature", "type": "object", "raw": "<raw-signature>", "signature": { "properties": [{ "key": "<property-name>"|{ <property-key-type> }, "value": { <property-type>, "required": <true/false> } }, ...] } }``` | ||
Function Signature | ```let x: (x: string) => void;``` | ```{ "name": "signature", "type": "function", "raw": "<raw-signature>", "signature": { "arguments": [{ "name": "<argument-name>", "type": { <argument-type> } }, ...], "return": { <return-type> } } }``` | ||
Callable-Object/Function-Object Signature | ```let x: { (x: string): void, prop: string };``` | ```{ "name": "signature", "type": "object", "raw": "<raw-signature>", "signature": { "properties": [{ "key": "<property-name>"|{ <property-key-type> }, "value": { <property-type>, "required": <true/false> } }, ...], "constructor": { <function-signature> } } }``` | ||
Tuple | ```let x: [foo, "value", number];``` | ```{ "name": "tuple", "raw": "<raw-signature>", "elements": [{ <element-type> }, ...] }``` | ||
Union | ```let x: number | string;``` | ```{ "name": "union", "raw": "<raw-signature>", "elements": [{ <element-type> }, ...] }``` | ||
Intersect | ```let x: number & string;``` | ```{ "name": "intersect", "raw": "<raw-signature>", "elements": [{ <element-type> }, ...] }``` | ||
Nullable modifier | ```let x: ?number;``` | ```{ "name": "number", "nullable": true }``` | ||
| Name | Examples | Result | | ||
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | ||
| Simple | `let x: string;`<br />`let x: number;`<br />`let x: boolean;`<br />`let x: any;`<br />`let x: void;`<br />`let x: Object;`<br />`let x: String;`<br />`let x: MyClass;` | `{ "name": "<type>" }` | | ||
| Literals | `let x: 'foo';`<br />`let x: 1;`<br />`let x: true;` | `{ "name": "literal", "value": "<rawvalue>" }` | | ||
| Typed Classes | `let x: Array<foo>;`<br />`let x: Class<foo>;`<br />`let x: MyClass<bar>;` | `{ "name": "<type>", "elements": [{ <element-type> }, ...] }` | | ||
| Object Signature | `let x: { foo: string, bar?: mixed };`<br />`let x: { [key: string]: string, foo: number };` | `{ "name": "signature", "type": "object", "raw": "<raw-signature>", "signature": { "properties": [{ "key": "<property-name>"\|{ <property-key-type> }, "value": { <property-type>, "required": <true/false> } }, ...] } }` | | ||
| Function Signature | `let x: (x: string) => void;` | `{ "name": "signature", "type": "function", "raw": "<raw-signature>", "signature": { "arguments": [{ "name": "<argument-name>", "type": { <argument-type> } }, ...], "return": { <return-type> } } }` | | ||
| Callable-Object/Function-Object Signature | `let x: { (x: string): void, prop: string };` | `{ "name": "signature", "type": "object", "raw": "<raw-signature>", "signature": { "properties": [{ "key": "<property-name>"\|{ <property-key-type> }, "value": { <property-type>, "required": <true/false> } }, ...], "constructor": { <function-signature> } } }` | | ||
| Tuple | `let x: [foo, "value", number];` | `{ "name": "tuple", "raw": "<raw-signature>", "elements": [{ <element-type> }, ...] }` | | ||
| Union | `let x: number \| string;` | `{ "name": "union", "raw": "<raw-signature>", "elements": [{ <element-type> }, ...] }` | | ||
| Intersect | `let x: number & string;` | `{ "name": "intersect", "raw": "<raw-signature>", "elements": [{ <element-type> }, ...] }` | | ||
| Nullable modifier | `let x: ?number;` | `{ "name": "number", "nullable": true }` | | ||
@@ -415,10 +412,10 @@ ## Result data structure | ||
``` | ||
(`[...]` means the property may not exist if such information was not found in the component definition) | ||
- `<propName>`: For each prop that was found, there will be an entry in `props` under the same name. | ||
- `<typeName>`: The name of the type, which is usually corresponds to the function name in `React.PropTypes`. However, for types define with `oneOf`, we use `"enum"` and for `oneOfType` we use `"union"`. If a custom function is provided or the type cannot be resolved to anything of `React.PropTypes`, we use `"custom"`. | ||
- `<propName>`: For each prop that was found, there will be an entry in `props` under the same name. | ||
- `<typeName>`: The name of the type, which is usually corresponds to the function name in `React.PropTypes`. However, for types define with `oneOf`, we use `"enum"` and for `oneOfType` we use `"union"`. If a custom function is provided or the type cannot be resolved to anything of `React.PropTypes`, we use `"custom"`. | ||
- `<typeValue>`: Some types accept parameters which define the type in more detail (such as `arrayOf`, `instanceOf`, `oneOf`, etc). Those are stored in `<typeValue>`. The data type of `<typeValue>` depends on the type definition. | ||
- `<flowType>`: If using flow type this property contains the parsed flow type as can be seen in the table above. | ||
[react]: http://facebook.github.io/react/ | ||
@@ -425,0 +422,0 @@ [flow]: http://flowtype.org/ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
202178
4848
415