Automatic Documentation Generator for React Components
npm install webframe-docs> :warning: this package is under development! (pending @webframer/compiler release)
Webframe Docs is a CLI tool for generating documentation of React components, with automatic:
1. PropTypes parsing of code comments into descriptions with
2. Source code generation for component examples wrapped inside
These documentation sites were built using webframe-docs CLI:
Webframe Docs compiler is:
- An alternative to Docz (partially inspired by Docz concepts)
- Package and project agnostic (works for any setup, without reliance on Webpack)
- Extendable beyond basic React PropTypes with
custom type system
1. Optionally create a webframe.docs.json config file in your project.
Directory paths use glob patterns,
which are relative to the location of the config file,
and can be outside the project root directory.
This is the default config when no config file exists:
``json5`
{
"projects": [
{
// Directory containing React Components to document
"inputComponents": [
"!**/node_modules",
"./components/*/.{js,jsx}"
],
// Directory containing source .mdx files to compile (or glob pattern)
"inputDocs": "./docs",
// Directory path where to save compiled doc files
"outputDocs": "./pages/docs",
// Where to save parsed React Component PropTypes
"outputPropTypes": "./src/propTypes.json",
},
],
}
2. Run the docs compiler command in Terminal (with optional --watch mode)
`shell`Runs this command inside project root,
or where there is webframe.docs.json config file.
npx webframe-docs compile --watch
Currently, webframe-docs supports documentation generated with Nextra using Next.js.
It watches for changes in the input directories and compiles files with .mdx extension into output directories (pages/docs
ex. ). Other files in the inputDocs directory also sync with the outputDocs` directory.
Then it's up to Nextra (ex. using nextra-theme-docs package) to build
the files for production bundle.