The vuedoc parser
Generate a JSON documentation for a Vue file component
Install
npm install --save @vuedoc/parserFeatures
- Extract the component name (from the name field of from the filename)
- Extract the component description
- Keywords Support: You can define your own keywords with the
@symbol like@author Sébastien - Extract component props
- Extract component data
- Extract computed properties with dependencies
- Extract component events
- Extract component slots
- Extract component methods
Options
| name | description | default value |
|---|---|---|
| filename | The filename to parse. Required unless filecontent is passed |
|
| filecontent | The file content to parse. Required unless filename is passed |
|
| encoding | The file encoding | 'utf8' |
| features | The component features to parse and extract | ['name', 'description', 'keywords', 'slots', 'props', 'data', 'computed', 'events', 'methods'] |
| defaultMethodVisibility | Can be set to 'public', 'protected', or 'private' |
'public' |
Usage
See test/fixtures/checkbox.vue for an Vue Component decoration example.
const vuedoc = require('@vuedoc/parser')
const options = {
filename: 'test/fixtures/checkbox.vue'
}
vuedoc.parse(options)
.then((component) => console.log(component))
.catch((err) => console.error(err))This will print this JSON output:
{
"header": [
{
"entry": {
"name": "checkbox" // The component name
},
// The component description
"comments": [
"A simple checkbox component"
],
// Attached keywords
keywords: [
{ name: "author", "description": "Sébastien" }
]
}
],
"props": [
{
"entry": {
"v-model": {
"type": "Array",
"required": true,
"twoWay": true
}
},
"comments": [
"The checbox model"
]
},
{
"entry": {
"disabled": "Boolean"
},
"comments": [
"Initial checbox state"
]
},
{
"entry": {
"checked": {
"type": "Boolean",
"default": true
}
},
"comments": [
"Initial checbox value"
]
}
],
"data": [
{
"visibility": "public",
"description": null,
"keywords": [],
"value": null,
"name": "initialValue"
}
],
"computed": [
{
"visibility": "public",
"description": null,
"keywords": [],
"value": [Object],
"name": "id",
"dependencies": [
"initialValue"
]
}
],
"slots": [
{
"name": "label",
"comments": [
"Use this slot to set the checkbox label"
]
}
],
"events": [
{
"name": "loaded",
"comments": [
"Emited when the component has been loaded"
]
}
],
"methods": [
{
"entry": {
"check": {
"type": "FunctionExpression"
}
},
"comments": [
"Check the checbox"
]
}
]
}Keywords Extraction
You can attach keywords to a comment and then extract them using the parser.
Usage
/**
* Component description
*
* @author Sébastien
* @license MIT
*/
export default {
name: 'my-checkbox',
created () {
/**
* Emit on Vue `created` hook
*
* @param boolean
*/
this.$emit('created', true)
}
}Parsing result:
{
"name": "my-checkbox",
"description": "Component description",
"keywords": [
{
"name": "author",
"description": "Sébastien"
},
{
"name": "license",
"description": "MIT"
}
],
"events": [
{
"name": "created",
"description": "Emit on Vue `created` hook",
"visibility": "public",
"keywords": [
{
"name": "param",
"description": "boolean"
}
]
}
]
}Parsing control with options.features
options.features lets you select which Vue Features you want to parse and extract.
The default value is define by Parser.SUPPORTED_FEATURES array.
Usage
Only parse name, props, computed properties and events:
const vuedoc = require('@vuedoc/parser')
const options = {
filename: 'test/fixtures/checkbox.vue',
features: [ 'name', 'props', 'computed', 'events' ]
}
vuedoc.parse(options)
.then((component) => console.log(component)) // => { name, props, computed, events }
.catch((err) => console.error(err))Parse all features except data:
const vuedoc = require('@vuedoc/parser')
const Parser = require('@vuedoc/parser/lib/parser')
const options = {
filename: 'test/fixtures/checkbox.vue',
features: Parser.SUPPORTED_FEATURES.filter((feature) => feature !== 'data')
}
vuedoc.parse(options)
.then((component) => console.log(component)) // => { name, description, keywords, props, computed, events, methods }
.catch((err) => console.error(err))Related projects
- @vuedoc/md - A Markdown Documentation Generator for Vue File Components
License
Under the MIT license. See LICENSE file for more details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent