Skip to content

Commit 787ca8d

Browse files
ph1pph1p
committed
feat(vue): add vue-docgen to support better vue file parsing
update all dependencies
1 parent cc0153e commit 787ca8d

File tree

11 files changed

+4456
-3765
lines changed

11 files changed

+4456
-3765
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
[![npm](https://img.shields.io/npm/v/vuepress-jsdoc.svg)](https://www.npmjs.com/package/vuepress-jsdoc)
55
[![now](https://img.shields.io/badge/now-demo-black)](https://vuepress-jsdoc-example.now.sh)
66

7-
This npm package is a command line script, which scans your JavaScript, Vue or Typescript source code and generates markdown files for vuepress with the help of [jsdoc-to-markdown](https://github.com/jsdoc2md/jsdoc-to-markdown) and [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api).
7+
This npm package is a command line script, which scans your JavaScript, Vue or Typescript source code and generates markdown files for vuepress with the help of [jsdoc-to-markdown](https://github.com/jsdoc2md/jsdoc-to-markdown) and [vue-docgen-cli](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-cli).
88

99
![CLI ./example](/example/img/cli.gif)
1010

‎cmds/index.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ const jsdoc2md = require('jsdoc-to-markdown');
77
const del = require('del');
88
const mm = require('micromatch');
99
const chalk = require('chalk');
10+
const child_process = require('child_process');
1011

1112
const vueSidebar = require('../helpers/vue-sidebar');
1213
const parseVuepressComment = require('../helpers/comment-parser');
1314
const { checkExtension, getExtension, getFilename, asyncForEach } = require('../helpers/utils');
14-
const vueDocToMarkdown = require('../helpers/vue-docgen-to-markdown');
1515

1616
const fileTree = [];
1717
const statistics = {};
@@ -133,7 +133,12 @@ async function generate(argv) {
133133
let mdFileData = '';
134134

135135
if (/\.vue$/.test(file)) {
136-
mdFileData = await vueDocToMarkdown(`${folder}/${file}`);
136+
const nodeModulesPath = path.join(path.dirname(fs.realpathSync(__filename)), '../node_modules');
137+
process.chdir(folder);
138+
child_process.execSync(`${nodeModulesPath}/.bin/vue-docgen ${file} ${path.join('../', folderPath)}`);
139+
process.chdir('../');
140+
141+
mdFileData = fs.readFileSync(`${folderPath}/${fileName}.md`, 'utf-8');
137142
} else if (/\.(js|ts|jsx|tsx)$/.test(file) && fileData) {
138143
const configPath = argv.jsDocConfigPath;
139144

@@ -273,7 +278,10 @@ async function generate(argv) {
273278
const resultTime = (Math.abs(startTime - +new Date()) / 1000).toFixed(2);
274279

275280
// get longest type string
276-
const maxExtLength = Math.max.apply(null, Object.keys(statistics).map(w => w.length));
281+
const maxExtLength = Math.max.apply(
282+
null,
283+
Object.keys(statistics).map(w => w.length)
284+
);
277285

278286
console.log(`\n${Array(maxExtLength + maxExtLength / 2).join('-')}`);
279287

‎example/documentation/code/config.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/documentation/code/test.md

Lines changed: 39 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2,100 +2,65 @@
22
title: test
33
---
44
# grid
5-
This is an example of creating a reusable grid component and using it with external data.
65

7-
::: tip Tags
8-
**version**: 1.0.5<br />**author**: [Rafael](https://github.com/rafaesc92)<br />**since**: Version 1.0.1<br />
9-
:::
6+
> This is an example of creating a reusable grid component and using it with external data.
107
11-
## Table of contents
12-
[[toc]]
8+
Author: [Rafael](https://github.com/rafaesc92)
139

14-
## Props
15-
16-
### msg (`string|number`)
17-
::: tip Tags
18-
**version**: 1.0.5<br />**since**: Version 1.0.1<br />**see**: See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br />**link**: See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br />
19-
:::
20-
21-
22-
|type|default|description|
23-
|:-|:-|:-|:-|
24-
|`string|number`|text|object/array defaults should be returned from a factory function|
25-
### myF (`func`)
10+
Since: Version 1.0.1
2611

12+
Version: 1.0.5
2713

28-
|type|default|description|
29-
|:-|:-|:-|:-|
30-
|`func`|(param, param2) => {}|Function|
31-
### v-model (`string`)
32-
::: tip Tags
33-
**model**: true<br />
34-
:::
35-
36-
37-
|type|default|description|
38-
|:-|:-|:-|:-|
39-
|`string`|-|Model example|
40-
### data (`array`)
41-
::: tip Tags
42-
**version**: 1.0.5<br />
43-
:::
44-
14+
## Props
4515

46-
|type|default|description|
47-
|:-|:-|:-|:-|
48-
|`array`|-|describe data|
49-
### columns (`array`)
16+
| Prop name | Description | Type | Values | Default |
17+
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | --------------------- |
18+
| msg | object/array defaults should be returned from a factory function<br/>`@version` 1.0.5<br/>`@since` Version 1.0.1<br/>`@see` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names<br/>`@link` See [Wikipedia](https://en.wikipedia.org/wiki/Web_colors#HTML_color_names) for a list of color names | string\|number | - | text |
19+
| myF | Function | func | - | (param, param2) => {} |
20+
| v-model | Model example<br/>`@model` true | string | - | |
21+
| data | describe data<br/>`@version` 1.0.5 | array | - | |
22+
| columns | get columns list | array | - | |
23+
| filterKey | filter key<br/>`@ignore` true | string | - | 'example' |
5024

25+
## Methods
5126

52-
|type|default|description|
53-
|:-|:-|:-|:-|
54-
|`array`|-|get columns list|
55-
### filterKey (`string`)
56-
::: tip Tags
57-
**ignore**: true<br />
58-
:::
27+
### sortBy
5928

29+
> Sets the order
6030
61-
|type|default|description|
62-
|:-|:-|:-|:-|
63-
|`string`|'example'|filter key|
31+
#### Params
6432

33+
| Param name | Type | Description |
34+
| ---------- | ------ | ------------ |
35+
| key | string | Key to order |
6536

66-
## Methods
37+
#### Return
6738

68-
### sortBy (key: `string`) -> `string`
69-
Sets the order
39+
| Type | Description |
40+
| ------ | ----------- |
41+
| string | Test |
7042

71-
::: tip Tags
72-
**access**: public<br />**version**: 1.0.5<br />**since**: Version 1.0.1<br />**param**: Key to order<br />**returns**: Test<br />
73-
:::
43+
## Events
7444

75-
#### Params
76-
| name | type | description
77-
|:-|:-|:-|
78-
|key|`string`|Key to order
45+
| Event name | Properties | Description |
46+
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- |
47+
| success | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event. |
7948

80-
#### returns (string)
81-
Test
8249
## Slots
8350

84-
### header
85-
Use this slot header
86-
### footer
87-
Use this slot footer
51+
| Name | Description | Bindings |
52+
| ------ | -------------------- | -------- |
53+
| header | Use this slot header | |
54+
| footer | Use this slot footer | |
55+
56+
---
8857

58+
# Home
8959

90-
## Events
60+
## Section 1
9161

92-
### success (object | string)
62+
Section 1
9363

94-
Success event.
95-
#### Properties
96-
| name | type | description
97-
|:-|:-|:-|
98-
|example|`object`|the demo example
99-
|exampleStr|`string`|the demo example
100-
|exampleNum|`number`|the demo example
64+
## Section 2
10165

66+
Section 2

‎example/documentation/code/vue-md.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: vue-md
3+
---
4+
# Button
5+
6+
> The only true button.
7+
8+
## Props
9+
10+
| Prop name | Description | Type | Values | Default |
11+
| --------- | ----------------------------------------------------------------- | ------ | -------------------------- | ---------------------------------------------------------------------- |
12+
| color | The color for the button. | string | - | '#333' |
13+
| size | The size of the button | string | `small`, `normal`, `large` | 'normal' |
14+
| onClick | Gets called when the user clicks on the button<br/>`@ignore` true | func | - | event => {<br> console.log('You have clicked me!', event.target);<br>} |
15+
16+
## Slots
17+
18+
| Name | Description | Bindings |
19+
| ------- | ----------------- | -------- |
20+
| default | Content of button | |
21+
22+
---
23+
24+
Use vue live right here too
25+
26+
````markdown
27+
```jsx live
28+
<Button>I’m transparent!</Button>
29+
```
30+
````
31+
32+
```jsx live
33+
<Button>I’m transparent!</Button>
34+
```
35+
36+
To render an example as highlighted source code remove the live modifier
37+
38+
```html
39+
<button>I’m transparent!</button>
40+
```
41+
42+
---
43+
44+
# Home
45+
46+
## Section 1
47+
48+
Section 1
49+
50+
## Section 2
51+
52+
Section 2

0 commit comments

Comments
 (0)