webpack loader to parse React component metadata from source code
MIT License
A Webpack loader for extracting React Component metadata (props, comments jsDoclets, etc). Helpful for generating documentation from React components, it uses react-component-metadata to parse and return JSON metadata when requiring a file.
$ npm install --save component-metadata-loader
Generally you will want to use the inline request syntax for using this loader, instead of adding it to your config file.
var metadata = require('component-metadata!./some/my-component');
metadata.MyComponent // { props, desc, descHtml, doclets }
The loader will parse out any jsDoc style "doclets" from either component or propType comment blocks. You can
access them from metadata.MyComponent.doclets
or metadata.MyComponent.props.myProp.doclets
Some doclets are "special cased", adjusting the returned metadata if they are present.
@required
will mark a prop as required as if you had used string.isRequired
for the propType.@type
: overrides the type name of the prop, also accepts the following syntax for enumsoneOf
props ('foo'|'bar'|'baz')
@default
: for manually specifying a default value for a prop.By default the loader will parse any prop or component comments as markdown using marked
, you can disabled this
with require('component-metadata?markdown=false!./my-component')
.
You can also pass any markdown options as well.
prismjs
is also set up to handle any js or jsx syntax highlighting in your markdown.
When passing options that aren't serializable to a string is necessary, you can specify global options in your Webpack config like so:
{
entry,
output,
...
componentMetadata: {
renderer: new MyMarkedRenderer(),
highlight: customHightlightingFunction
}
}
If you want to add some custom metadata parsing you can provide a parse
function in the options
{
entry,
output,
...
componentMetadata: {
parse(metadata, componentName, options, filePath) {
//add something to metadata
}
}
}
MIT © Jason Quense