feat(vue): add vue-docgen to support better vue file parsing

update all dependencies
ph1p · Feb 14, 2021 · 787ca8d · 787ca8d
1 parent cc0153e
commit 787ca8d
Show file tree

Hide file tree

Showing 11 changed files with 4,456 additions and 3,765 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 [![npm](https://img.shields.io/npm/v/vuepress-jsdoc.svg)](https://www.npmjs.com/package/vuepress-jsdoc)
 [![now](https://img.shields.io/badge/now-demo-black)](https://vuepress-jsdoc-example.now.sh)
 
-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).
+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).
 
 ![CLI ./example](/example/img/cli.gif)
 

diff --git a/cmds/index.js b/cmds/index.js
@@ -7,11 +7,11 @@ const jsdoc2md = require('jsdoc-to-markdown');
 const del = require('del');
 const mm = require('micromatch');
 const chalk = require('chalk');
+const child_process = require('child_process');
 
 const vueSidebar = require('../helpers/vue-sidebar');
 const parseVuepressComment = require('../helpers/comment-parser');
 const { checkExtension, getExtension, getFilename, asyncForEach } = require('../helpers/utils');
-const vueDocToMarkdown = require('../helpers/vue-docgen-to-markdown');
 
 const fileTree = [];
 const statistics = {};
@@ -133,7 +133,12 @@ async function generate(argv) {
             let mdFileData = '';
 
             if (/\.vue$/.test(file)) {
-              mdFileData = await vueDocToMarkdown(`${folder}/${file}`);
+              const nodeModulesPath = path.join(path.dirname(fs.realpathSync(__filename)), '../node_modules');
+              process.chdir(folder);
+              child_process.execSync(`${nodeModulesPath}/.bin/vue-docgen ${file} ${path.join('../', folderPath)}`);
+              process.chdir('../');
+
+              mdFileData = fs.readFileSync(`${folderPath}/${fileName}.md`, 'utf-8');
             } else if (/\.(js|ts|jsx|tsx)$/.test(file) && fileData) {
               const configPath = argv.jsDocConfigPath;
 
@@ -273,7 +278,10 @@ async function generate(argv) {
     const resultTime = (Math.abs(startTime - +new Date()) / 1000).toFixed(2);
 
     // get longest type string
-    const maxExtLength = Math.max.apply(null, Object.keys(statistics).map(w => w.length));
+    const maxExtLength = Math.max.apply(
+      null,
+      Object.keys(statistics).map(w => w.length)
+    );
 
     console.log(`\n${Array(maxExtLength + maxExtLength / 2).join('-')}`);
 

diff --git a/example/documentation/code/config.js b/example/documentation/code/config.js
diff --git a/example/documentation/code/test.md b/example/documentation/code/test.md
@@ -2,100 +2,65 @@
 title: test
 ---
 # grid
-This is an example of creating a reusable grid component and using it with external data.
 
-::: tip Tags
-**version**: 1.0.5<br />**author**: [Rafael](https://github.com/rafaesc92)<br />**since**: Version 1.0.1<br />
-:::
+> This is an example of creating a reusable grid component and using it with external data.
 
-## Table of contents
-[[toc]]
+Author: [Rafael](https://github.com/rafaesc92)
 
-## Props
-
-### msg (`string|number`)
-::: tip Tags
-**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 />
-:::
-
-
-|type|default|description|
-|:-|:-|:-|:-|
-|`string|number`|text|object/array defaults should be returned from a factory function|
-### myF (`func`)
+Since: Version 1.0.1
 
+Version: 1.0.5
 
-|type|default|description|
-|:-|:-|:-|:-|
-|`func`|(param, param2) => {}|Function|
-### v-model (`string`)
-::: tip Tags
-**model**: true<br />
-:::
-
-
-|type|default|description|
-|:-|:-|:-|:-|
-|`string`|-|Model example|
-### data (`array`)
-::: tip Tags
-**version**: 1.0.5<br />
-:::
-
+## Props
 
-|type|default|description|
-|:-|:-|:-|:-|
-|`array`|-|describe data|
-### columns (`array`)
+| Prop name | Description                                                                                                                                                                                                                                                                                                                                       | Type           | Values | Default               |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------ | --------------------- |
+| 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                  |
+| myF       | Function                                                                                                                                                                                                                                                                                                                                          | func           | -      | (param, param2) => {} |
+| v-model   | Model example<br/>`@model` true                                                                                                                                                                                                                                                                                                                   | string         | -      |                       |
+| data      | describe data<br/>`@version` 1.0.5                                                                                                                                                                                                                                                                                                                | array          | -      |                       |
+| columns   | get columns list                                                                                                                                                                                                                                                                                                                                  | array          | -      |                       |
+| filterKey | filter key<br/>`@ignore` true                                                                                                                                                                                                                                                                                                                     | string         | -      | 'example'             |
 
+## Methods
 
-|type|default|description|
-|:-|:-|:-|:-|
-|`array`|-|get columns list|
-### filterKey (`string`)
-::: tip Tags
-**ignore**: true<br />
-:::
+### sortBy
 
+> Sets the order
 
-|type|default|description|
-|:-|:-|:-|:-|
-|`string`|'example'|filter key|
+#### Params
 
+| Param name | Type   | Description  |
+| ---------- | ------ | ------------ |
+| key        | string | Key to order |
 
-## Methods
+#### Return
 
-### sortBy (key: `string`) -> `string`
- Sets the order
+| Type   | Description |
+| ------ | ----------- |
+| string | Test        |
 
-::: tip Tags
-**access**: public<br />**version**: 1.0.5<br />**since**: Version 1.0.1<br />**param**: Key to order<br />**returns**: Test<br />
-:::
+## Events
 
-#### Params
-| name | type | description
-|:-|:-|:-|
-|key|`string`|Key to order
+| Event name | Properties                                                                                                                          | Description    |
+| ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| success    | **example** `object` - the demo example<br>**exampleStr** `string` - the demo example<br>**exampleNum** `number` - the demo example | Success event. |
 
-#### returns (string)
- Test
 ## Slots
 
-### header
-Use this slot header
-### footer
-Use this slot footer
+| Name   | Description          | Bindings |
+| ------ | -------------------- | -------- |
+| header | Use this slot header |          |
+| footer | Use this slot footer |          |
+
+---
 
+# Home
 
-## Events
+## Section 1
 
-### success (object | string)
+Section 1
 
-Success event.
-#### Properties
-| name | type | description
-|:-|:-|:-|
-|example|`object`|the demo example
-|exampleStr|`string`|the demo example
-|exampleNum|`number`|the demo example
+## Section 2
 
+Section 2
diff --git a/example/documentation/code/vue-md.md b/example/documentation/code/vue-md.md
@@ -0,0 +1,52 @@
+---
+title: vue-md
+---
+# Button
+
+> The only true button.
+
+## Props
+
+| Prop name | Description                                                       | Type   | Values                     | Default                                                                |
+| --------- | ----------------------------------------------------------------- | ------ | -------------------------- | ---------------------------------------------------------------------- |
+| color     | The color for the button.                                         | string | -                          | '#333'                                                                 |
+| size      | The size of the button                                            | string | `small`, `normal`, `large` | 'normal'                                                               |
+| 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>} |
+
+## Slots
+
+| Name    | Description       | Bindings |
+| ------- | ----------------- | -------- |
+| default | Content of button |          |
+
+---
+
+Use vue live right here too
+
+````markdown
+```jsx live
+<Button>I’m transparent!</Button>
+```
+````
+
+```jsx live
+<Button>I’m transparent!</Button>
+```
+
+To render an example as highlighted source code remove the live modifier
+
+```html
+<button>I’m transparent!</button>
+```
+
+---
+
+# Home
+
+## Section 1
+
+Section 1
+
+## Section 2
+
+Section 2