vuese / vuese Goto Github PK

View Code? Open in Web Editor NEW

1.7K 19.0 121.0 2.3 MB

🤗 One-stop solution for vue component documentation. Original org: https://github.com/vuese

Home Page: https://vuese.github.io/website/

License: MIT License

JavaScript 3.56% TypeScript 78.05% Vue 9.32% HTML 0.64% CSS 8.43%

vuese's Introduction

vuese

One-stop solution for vue component documentation

This project is supported by our Backers

Document

For detailed documentation: https://vuese.github.io/website/

Overview

Vuese Automatically generate documentation for your vue component, and provides a variety of solutions for generating component documentation to meet your different needs.

@vuese/cli

@vuese/cli is a command line tool that is very simple to use. If you want to quickly build a documentation site for your vue component or just want to generate markdown document for your vue component, then this tool might be a good choice. Please go to the details: @vuese/cli

@vuese/parser

The @vuese/parser module is the parser for the vue component, @vuese/cli internally parsing the vue component via the @vuese/parser module and extract the information we want. You can do any more advanced things with the interface provided by the @vuese/parser module. For the API documentation, please go to @vuese/parser

Online experience

Visit the following 👇 link to intuitively feel @vuese/parser:

An online experience playground for vuese

@vuese/markdown-render

@vuese/markdown-render receives the result of the Vue file parsed by @vuese/parser as a parameter, generate a markdown string. @vuese/markdown-render is also used for @vuese/cli's document generation, in other words, you can use @vuese/markdown-render and @vuese/parser alone to write your own CLI tool to do something interesting.

@vuese/loader

@vuese/cli is a tool for quickly creating document prototypes that don't have a more flexible documentation solution. So this is why @vuese/loader and @vuese/webpack-plugin are needed.

Our goal is to focus only on the parts that can be automated, and does not limit how your document project is organized and what document framework is used. Of course, we can also provide fast solutions.

[WIP][todo]

@vuese/webpack-plugin

[WIP][todo]

Roadmap

Planning for vuese2.x: Read our roadmap

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: yarn commit
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Developer Resources

Running a Local Build

In root directory of your Vuese project:

Run yarn run build
Run yarn link

In project that you want to use the libraries:

If @vuese/cli is not yet installed, add it: yarn add @vuese/cli
Run yarn link vuese-monorepo
Navigate to node_modules/.bin and open vuese.cmd and vuese
Change any instance of @vuese to vuese-monorepo\packages in both files

To generate the documentation locally, run the vuese binary from node_modules/.bin :

Run node_modules\.bin\vuese gen (cmd) or
Run node_modules/.bin/vuese gen (powershell)

Samples

Component Notation

Component Documentation

Samples/Docs Folder

Get started immediately in a free online dev environment:

Contributors

Thanks goes to these wonderful people:

_HcySunYang 💻 ⚠️ 📖 💡	_{Barthélémy Ledoux} 🐛 💻	_{Bernhard Wittmann} 💻 🤔	_{Steve Young} 🐛 💻	_wulunyi 💻	_Estelle00 💻	_{Matt Roxburgh} 🐛 💻
_{James George} 💻 📖	_{IWANABETHATGUY} 💻 ⚠️ 📖 🐛	_screetBloom 💻 ⚠️ 📖 🐛 🚇	_{Michele Girini} ⚠️ 🐛 💻

Author

Vuese © HcySunYang, Released under the MIT License.
Authored and maintained by HcySunYang.

homepage · GitHub @HcySunYang · Twitter @HcySunYang

vuese's People

Contributors

Stargazers

Watchers

Forkers

eagle518 496545016 estelle00 hanshou101 papajia edenspark stonepang xiaodai123 wulunyi mvpleung karenl70 henrickcn masongzhi jinjianfeng longzy yansenlei jericopulvera gitviscodeorg wishwish1314 mrmagicalj svenefftinge giserh buptsteve berniwittmann qaza2008 wagnlinzh roxburghm hhy5277 subztep evillt-bot xuzicn meetingattendee rennerwoliveira lisiyizu nbbj-digital kornelzaziemski michelchouinard warwaf cloneothersproject daveberning sudomf tayhobbs jamesgeorge007 flyinglove sunny-heo josepuma zhorton34 wade1990 hefeng1208 josephoneill lancui1110 aakki qinrr bakuryuthem0 christiankienle gaglage amitozdeol keyingfu0 17881055 iwanabethatguy zuopf769 constaline victoran0508 nirviaje vikaskedia tangqy commanderxl oflenake johnsusek mutablestate zhao-li feng138168 greper g3g3tin silrage dreamlords christianklemp-imt christianklemp minjiechang wang123screet screetbloom salteryu michelegirini koukitakai calintsz bluepeople1 hondrytravis noah227 dokiii 1998gzh 13168335674 bnznamco wdaz sobinge hangxun wangjian199294 abdulrahmanh995 s344337847 xiaoyanzheng nodmark

vuese's Issues

Component with no `props` causes doc gen to halt without error - updated see comment

Description

If you have a component with no props, common when using mixins, or an empty props, ie {}, then the gen crashes - using the online vuese explorer reports a "TypeError: Cannot read property 'content' of null" error.

Reproduce

To reproduce use this very basic template

<script>
  export default {
    name: 'BugShowcase',
   }
</script>

or this one

<script>
  export default {
    name: 'BugShowcase',
	props: {  },
   }
</script>

This "fixes" it

<script>
  export default {
    name: 'BugShowcase',
	props: {
                fixedIt: { type: Boolean }
	    },
   }
</script>

Expected behavior

Should not crash, and if it does this should be reported when running vuese gen.

The documentation should exclude the props section if the component has no props or have a props section with "no props"

Version Info

$ npm view vuese version
1.4.7

$ npm view @vuese/cli version
2.1.1

Additional information

This primarily occurs when mixins are used so all properties are abstracted out

Issues about name, slot, event

There are two issues when I tried to use vuese:

If the property 'name' contains -, nothing will be generated.

For example:

<template>
  <div>
    <!-- Form header -->
    <slot name="header">
      <!-- `<th>title</th>` -->
      <th>title</th>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'test-test',

  props: {
    // The name of the form, up to 8 characters
    name: {
      type: [String, Number],
      required: true,
      validator () {}
    }
  },
  methods: {
    // @vuese
    // Used to manually clear the form
    clear () {
      // Fire when the form is cleared
      // @arg The argument is a boolean value representing xxx
      this.$emit('onclear', true)
    }
  }
}
</script>

If the component doesn't have slot、event、method，default contents will still be generated.

For example:

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'test',

  props: {
    // The name of the form, up to 8 characters
    name: {
      type: [String, Number],
      required: true,
      validator () {}
    }
  },
  methods: {
    // @vuese
    // Used to manually clear the form
    clear () {

    }
  }
}
</script>

TypeError: Cannot read property 'compName' of undefined

TypeError: Cannot read property 'compName' of undefined
at componentRes.map.res (/Users/aaa/.config/yarn/global/node_modules/vuese/lib/genDocute.js:11:18)
at Array.map ()
at module.exports (/Users/aaa/.config/yarn/global/node_modules/vuese/lib/genDocute.js:10:41)
at

在vue-cli3中使用ts的get方法，无法生成该方法的说明

// @vuese
// 获取标题栏高度，可以使用self.getBarHeight(),也可以使用self.barHeight返回
public get barHeight(): number {
            return this.navBar.offsetHeight;
 }

以上代码无法识别

另外使用这样的写法在生成文档的时候会报错

public get barHeight(): number {
            return (<any>this).$refs.navBar.offsetHeight;
 }

虽然可以通过这样的改写，达到效果，但是感觉多绕了一下，希望可以支持强制类型转化

private mounted() {
            this.navBar = this.$refs.navBar;
 }
 // @vuese
// 获取标题栏高度，可以使用self.getBarHeight(),也可以使用self.barHeight返回
public getBarHeight(): number {
            return this.navBar.offsetHeight;
}

 public get barHeight(): number {
            return this.navBar.offsetHeight;
}

控制台信息:
The error occurred when processing: /Volumes/CHEN YANKAI/sourceCode/vueProject/simple-mall/src/components/NavBar.vue
SyntaxError: Unexpected token (38:8)
at Object.raise (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:3831:17)
at Object.unexpected (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:5143:16)
at Object.parseExprAtom (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:6283:20)
at Object.parseExprAtom (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:3552:20)
at Object.parseExprSubscripts (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:5862:23)
at Object.parseMaybeUnary (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:5842:21)
at Object.parseMaybeUnary (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:10403:20)
at Object.parseExprOps (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:5729:23)
at Object.parseMaybeConditional (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:5702:23)
at Object.parseMaybeAssign (/usr/local/lib/node_modules/@vuese/cli/node_modules/@babel/parser/lib/index.js:5647:21)
Successfully created: /Volumes/CHEN YANKAI/sourceCode/vueProject/simple-mall/website/components/Badge.md
Successfully created: /Volumes/CHEN YANKAI/sourceCode/vueProject/simple-mall/website/components/FilletCard.md
Successfully created: /Volumes/CHEN YANKAI/sourceCode/vueProject/simple-mall/website/components/NumberBox.md
Successfully created: /Volumes/CHEN YANKAI/sourceCode/vueProject/simple-mall/website/components/Grid.md
Start generating...

Typescript still not working

Describe the bug
Typescript still not working

To Reproduce
Using just the parser, I ran the following:

const { parser } = require('@vuese/parser')

// Read vue file content
const source = `
<template>
  <div>
    <button @click="clicked">click</button>
    <br>
    {{x}}
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'

  @Component
  export default class ModulesDemo extends Vue {

    @Prop() x :string

    clicked() {
      this.x = new Date().toString()
    }
  }
</script>

<style scoped>

</style>

  
`
// Parse and get the result using the parser function
try {
  console.log(source)
  const parserRes = parser(source)
  console.log(parserRes)
} catch(e) {
  console.error(e)
}

Expected behavior
Expected to see something in parserRes object.
Instead parserRes was empty:

{ componentDesc: { default: [] } }

Screenshots
not applicable

Which version do you use:
1.4.7

Additional information
none

Feature Request - Add Multiple Groups To Doc Gen Request In package.json to improve documentation grouping - duplicate of #41

Currently all documented items are shoved into one long, unsorted, list.

In package.json change the config to allow multiple title / include configs and to iterate through them to generate a docute sidebar with

  "vuese": {
    "title": "My Project Components",
    "genType": "docute",
    "outDir": "docs",
    "include": ["src/components/ui/*.vue", "src/components/tasks/*.vue", "src/mixins/**/*.vue"]
  }

Generates this

        sidebar: [
            {
                title: 'NOQU Go Components',
                links: [
                        ui component link Z,
                        ui component link A,
                        task component link B,
                        task component link J,
                       Mix in P,
                       Mix in K,
                       Mix in C,
               ]

So, if you could specify an array of title and include objects such as

  "vuese": {
    "genType": "docute",
    "outDir": "docs",
    "include": [
        {
            "title": "UI Components",
            "include": "src/components/ui/*.vue"
        },
        {
            "title": "Task Components",
            "include": "src/components/tasks/*.vue"
        },
        {
            "title": "Mixins",
            "include": "src/mixins/**/*.vue"
        }
    ]
  }

then it should generate the following sidebar with multiple groups and sorted elements

        sidebar: [
            {
                title: 'UI Components',
                links: [
                        ui component link A,
                        ui component link Z
                ]
            },
            {
                title: 'Task Components',
                links: [
                        task component link B,
                        task component link J
                ]
            },
            {
                title: 'Mixins',
                links: [
                       Mix in C,
                       Mix in K,
                       Mix in P
               ]

Cannot generate Docute document (error message)

Hello,

Thanks for this interesting project. I have tried to set up a Docute document, but I'm failing using the gen command every time using vuese gen --include="src/pages/search/*.vue".

The error reads

⏳  Start creating markdown files...
TypeError: Cannot read property 'children' of undefined
    at Object.comment (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:2575:21)
    at parseHTML (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:345:23)
    at parse (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:2402:3)
    at baseCompile (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:4267:13)
    at Object.compile (/usr/local/share/.config/yarn/global/node_modules/vue-template-compiler/build.js:4242:22)
    at sfcToAST (/usr/local/share/.config/yarn/global/node_modules/vuese/dist/vuese.js:28:47)
    at parser$1 (/usr/local/share/.config/yarn/global/node_modules/vuese/dist/vuese.js:402:20)
    at files.map (/usr/local/share/.config/yarn/global/node_modules/vuese/lib/index.js:30:23)
    at <anonymous>

Anyone knows why this happens?

Also, I'd like to know if the command parses all subdirectories automatically?

Thank you in advance

Line-height is expected to be bigger so that tags will not overlap in vertical direction

I am so sorry to say that the style of generation is sometimes unfriendly. For example, line-height is expected to be bigger so that tags will not overlap in vertical direction

tsx support?

Currently does not seem to support

No component description via vuese gen - there correctly in vuese explorer

Description

When generating documentation the Component Description is omitted when using vuese gen - copying the sample component definition into the vuese explorer online shows the correct documentation with the component title in place.

Reproduce

Use the following mock component and generate docs via the command line

<script>
// this component description is included in the vuese docs only via explorer
export default {
    name: 'BugShowcase',
    props: {
        // this is included in the vuese docs via gen and explorer
        aprop: { type: Boolean }
    }
}
</script>

run the generate command

$ vuese gen
✨ Successfully created: /........../docs/components/BugShowcase.md
⏳ Start generating...
success Done, let the hacking begin!
✨ Generated successfully
$

This is the markup generated

# BugShowcase

## Props

<!-- @vuese:BugShowcase:props:start -->
|Name|Description|Type|Required|Default|
|---|---|---|---|---|
|aprop|this is included in the vuese docs via gen and explorer|`Boolean`|`false`|-|

<!-- @vuese:BugShowcase:props:end -->

Expected Behaviour

Copy and paste the component into the online vuese explorer and this is the markup generate - which is as expected.

# BugShowcase

this component description is included in the vuese docs only via explorer

## Props

<!-- @vuese:BugShowcase:props:start -->
|Name|Description|Type|Required|Default|
|---|---|---|---|---|
|aprop|this is included in the vuese docs via gen and explorer|`Boolean`|`false`|-|

<!-- @vuese:BugShowcase:props:end -->

Version Info

$ npm view vuese version
1.4.7

$ npm view @vuese/cli version
2.1.1

out of memory ?

Describe the bug

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

To Reproduce

I tried to generate docs for matsp/material-components-vue
clone matsp/material-components-vue to my mac, and copy .vueserc of vuese/vuese to the root path of material-components-vue (local)
run vuese gen
then I got the following error:

$ vuese gen
? Select the target to generate Docute - The fastest way to create a documentation site for your pro
ject.
⏳  Start creating markdown files...


<--- Last few GCs --->

[19169:0x103800000]   147834 ms: Mark-sweep 1371.7 (1439.5) -> 1358.5 (1440.0) MB, 258.8 / 0.1 ms  (average mu = 0.276, current mu = 0.226) allocation failure scavenge might not succeed
[19169:0x103800000]   148171 ms: Mark-sweep 1372.5 (1440.0) -> 1360.8 (1440.5) MB, 272.6 / 0.1 ms  (average mu = 0.238, current mu = 0.193) allocation failure scavenge might not succeed


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x31a2df35be3d]
    1: StubFrame [pc: 0x31a2df35d1ff]
Security context: 0x267146d1e6e1 <JSObject>
    2: normalizeString(aka normalizeString) [0x26715e882201] [path.js:~57] [pc=0x31a2df80a7df](this=0x26710d3826f1 <undefined>,path=0x2671aa264761 <String[221]: /Users/somebody/Downloads/material-components-vue-master/node_modules/@vue/babel-preset-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-transform-duplica...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10003ae75 node::Abort() [/Users/somebody/.nvm/versions/node/v10.14.0/bin/node]
 2: 0x10003b07f node::OnFatalError(char const*, char const*) [/Users/somebody/.nvm/versions/node/v10.14.0/bin/node]
 3: 0x1001a7ad5 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/somebody/.nvm/versions/node/v10.14.0/bin/node]
 4: 0x100572ee2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/somebody/.nvm/versions/node/v10.14.0/bin/node]

Screenshots

Which version do you use:

vuese: 1.4.7
matsp/material-components-vue: 0.26.1
node: v10.14.0
MacBook Pro 15 (the year 2015)

Additional information
be willing to provide more info if you need.

Config has no effect on generate

Hi,

nice tool! However, I cannot seem to get the config file to work. No matter what I type in there as include value it always loads all .vue files from my project root. Even if I directly enter an include option like vuese gen --include="assets/js/components//*.vue"** it just seems to ignore the given path.

Best regards
Janis

Support for seperate TypeScript/JavaScript file

Describe the bug
In my Vue components I have seperated the script-part from the template-/style-part via <script lang="ts" src="./myComponent.ts"></script>

So vuese don't recognize these external script and did not generate documentation.

To Reproduce

create a vue component file myComponent.vue
replace <script lang="ts"> ... </script> with <script lang="ts" src="./myComponent.ts"></script>
externalize the script part in a file named myComponent.ts
generate documentation

Expected behavior
generated documentation, if script part is external

Which version do you use:
1.4.7

Additional information
It's not a bug, more a feature request.

Cannot read property 'children' of undefined

E:\git\web-material-user@last (v1-scene -> origin)                                                            
λ vuese gen --include="components/*.vue"                                                                      
? Select the target to generate Only markdown.                                                                
∞ Start creating markdown files...                                                                            
(node:78728) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of undefined        
    at Object.comment (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:2575:21)                                                                                                    
    at parseHTML (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:345
:23)                                                                                                          
    at parse (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:2402:3)
    at baseCompile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:4
267:13)                                                                                                       
    at Object.compile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:4242:22)                                                                                                    
    at sfcToAST (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:28:47)         
    at parser$1 (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:401:20)        
    at files.map (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\lib\index.js:30:23)         
    at <anonymous>                                                                                            
(node:78728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by th
rowing inside of an async function without a catch block, or by rejecting a promise which was not handled with
 .catch(). (rejection id: 1)                                                                                  
(node:78728) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise
 rejections that are not handled will terminate the Node.js process with a non-zero exit code.                
(node:78728) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of undefined        
    at Object.comment (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:2575:21)                                                                                                    
    at parseHTML (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:345
:23)                                                                                                          
    at parse (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:2402:3)
    at baseCompile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:4
267:13)                                                                                                       
    at Object.compile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:4242:22)                                                                                                    
    at sfcToAST (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:28:47)         
    at parser$1 (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:401:20)        
    at files.map (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\lib\index.js:30:23)         
    at <anonymous>                                                                                            
(node:78728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by th
rowing inside of an async function without a catch block, or by rejecting a promise which was not handled with
 .catch(). (rejection id: 2)                                                                                  
(node:78728) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of undefined        
    at Object.comment (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:2575:21)                                                                                                    
    at parseHTML (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:345
:23)                                                                                                          
    at parse (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:2402:3)
    at baseCompile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:4
267:13)                                                                                                       
    at Object.compile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:4242:22)                                                                                                    
    at sfcToAST (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:28:47)         
    at parser$1 (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:401:20)        
    at files.map (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\lib\index.js:30:23)         
    at <anonymous>                                                                                            
(node:78728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by th
rowing inside of an async function without a catch block, or by rejecting a promise which was not handled with
 .catch(). (rejection id: 3)                                                                                  
(node:78728) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of undefined        
    at Object.comment (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:2575:21)                                                                                                    
    at parseHTML (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:345
:23)                                                                                                          
    at parse (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:2402:3)
    at baseCompile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:4
267:13)                                                                                                       
    at Object.compile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:4242:22)                                                                                                    
    at sfcToAST (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:28:47)         
    at parser$1 (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:401:20)        
    at files.map (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\lib\index.js:30:23)         
    at <anonymous>                                                                                            
(node:78728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by th
rowing inside of an async function without a catch block, or by rejecting a promise which was not handled with
 .catch(). (rejection id: 4)                                                                                  
(node:78728) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of undefined        
    at Object.comment (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:2575:21)                                                                                                    
    at parseHTML (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:345
:23)                                                                                                          
    at parse (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:2402:3)
    at baseCompile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:4
267:13)                                                                                                       
    at Object.compile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:4242:22)                                                                                                    
    at sfcToAST (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:28:47)         
    at parser$1 (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:401:20)        
    at files.map (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\lib\index.js:30:23)         
    at <anonymous>                                                                                            
(node:78728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by th
rowing inside of an async function without a catch block, or by rejecting a promise which was not handled with
 .catch(). (rejection id: 5)                                                                                  
(node:78728) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of undefined        
    at Object.comment (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:2575:21)                                                                                                    
    at parseHTML (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:345
:23)                                                                                                          
    at parse (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:2402:3)
    at baseCompile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:4
267:13)                                                                                                       
    at Object.compile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:4242:22)                                                                                                    
    at sfcToAST (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:28:47)         
    at parser$1 (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:401:20)        
    at files.map (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\lib\index.js:30:23)         
    at <anonymous>                                                                                            
(node:78728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by th
rowing inside of an async function without a catch block, or by rejecting a promise which was not handled with
 .catch(). (rejection id: 6)                                                                                  
(node:78728) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of undefined        
    at Object.comment (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:2575:21)                                                                                                    
    at parseHTML (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:345
:23)                                                                                                          
    at parse (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:2402:3)
    at baseCompile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.js:4
267:13)                                                                                                       
    at Object.compile (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vue-template-compiler\build.j
s:4242:22)                                                                                                    
    at sfcToAST (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:28:47)         
    at parser$1 (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\dist\vuese.js:401:20)        
    at files.map (C:\Users\XF\AppData\Local\Yarn\config\global\node_modules\vuese\lib\index.js:30:23)         
    at <anonymous>                                                                                            
(node:78728) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by th
rowing inside of an async function without a catch block, or by rejecting a promise which was not handled with
√ Successfully created: E:\git\web-material-user@last\website\components\project-material.md                  
√ Successfully created: E:\git\web-material-user@last\website\components\button-demo.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\codeButton.md                        
√ Successfully created: E:\git\web-material-user@last\website\components\dialog-test.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\screenButton.md                      
√ Successfully created: E:\git\web-material-user@last\website\components\v-script.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\app.md                               
√ Successfully created: E:\git\web-material-user@last\website\components\z-dialog.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\feedback.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\module-static2d.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\guide.md                             
√ Successfully created: E:\git\web-material-user@last\website\components\module-panorama.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\dialog-test.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\demo-dialog-confirm.md               
√ Successfully created: E:\git\web-material-user@last\website\components\page-404.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\library-preview.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\module-static2d.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\guide-logic.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\transform-tools.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\registry.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\pixi-canvas-extend.md                
√ Successfully created: E:\git\web-material-user@last\website\components\transformRect.md                     
√ Successfully created: E:\git\web-material-user@last\website\components\pixi-canvas.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\registry.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\pixi-canvas-extend.md                
√ Successfully created: E:\git\web-material-user@last\website\components\registryTab.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\vue-rulers.md                        
√ Successfully created: E:\git\web-material-user@last\website\components\pixi-canvas-scene.md                 
√ Successfully created: E:\git\web-material-user@last\website\components\app.md                               
√ Successfully created: E:\git\web-material-user@last\website\components\registry-from.md                     
√ Successfully created: E:\git\web-material-user@last\website\components\dialog-code.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\accordionMenu-flagColor-warp.md      
√ Successfully created: E:\git\web-material-user@last\website\components\registry-from.md                     
√ Successfully created: E:\git\web-material-user@last\website\components\dialog-code.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\page-tab-level2.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\dm-button-group.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\STabPanel.md                         
√ Successfully created: E:\git\web-material-user@last\website\components\z-dialog.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\dm-icon.md                           
√ Successfully created: E:\git\web-material-user@last\website\components\page-tab.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\vddl-handle.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\vddl-draggable.md                    
√ Successfully created: E:\git\web-material-user@last\website\components\dm-header.md                         
√ Successfully created: E:\git\web-material-user@last\website\components\SIcon.md                             
√ Successfully created: E:\git\web-material-user@last\website\components\vddl-placeholder.md                  
√ Successfully created: E:\git\web-material-user@last\website\components\export-all-expression.md             
√ Successfully created: E:\git\web-material-user@last\website\components\export-list.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\topBar.md                            
√ Successfully created: E:\git\web-material-user@last\website\components\vddl-nodrag.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\dm-layout.md                         
√ Successfully created: E:\git\web-material-user@last\website\components\vddl-list.md                         
√ Successfully created: E:\git\web-material-user@last\website\components\app.md                               
√ Successfully created: E:\git\web-material-user@last\website\components\export-icon.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\dm-loading.md                        
√ Successfully created: E:\git\web-material-user@last\website\components\app.md                               
√ Successfully created: E:\git\web-material-user@last\website\components\export-null.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\export-dialog-pay.md                 
√ Successfully created: E:\git\web-material-user@last\website\components\app.md                               
√ Successfully created: E:\git\web-material-user@last\website\components\price-view.md                        
√ Successfully created: E:\git\web-material-user@last\website\components\v-price.md                           
√ Successfully created: E:\git\web-material-user@last\website\components\bubble.md                            
√ Successfully created: E:\git\web-material-user@last\website\components\single.md                            
√ Successfully created: E:\git\web-material-user@last\website\components\dm-scene-static2d.md                 
√ Successfully created: E:\git\web-material-user@last\website\components\index.md                             
√ Successfully created: E:\git\web-material-user@last\website\components\coupons-empty.md                     
√ Successfully created: E:\git\web-material-user@last\website\components\order-table.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\order-page.md                        
√ Successfully created: E:\git\web-material-user@last\website\components\demo-b.md                            
√ Successfully created: E:\git\web-material-user@last\website\components\coupons-table.md                     
√ Successfully created: E:\git\web-material-user@last\website\components\history-button.md                    
√ Successfully created: E:\git\web-material-user@last\website\components\order-empty.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\frame-switch.md                      
√ Successfully created: E:\git\web-material-user@last\website\components\personal-center.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\order-table-row.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\dialog-project.md                    
√ Successfully created: E:\git\web-material-user@last\website\components\layer-card.md                        
√ Successfully created: E:\git\web-material-user@last\website\components\dm-context-menu.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\panel-layer.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\tab-switch-view.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\export-page.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\dm-accordion-menu.md                 
√ Successfully created: E:\git\web-material-user@last\website\components\dm-tab.md                            
√ Successfully created: E:\git\web-material-user@last\website\components\dialog-test.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\subTab.md                            
√ Successfully created: E:\git\web-material-user@last\website\components\progressBar.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\dm-button.md                         
√ Successfully created: E:\git\web-material-user@last\website\components\initDialog.md                        
√ Successfully created: E:\git\web-material-user@last\website\components\a-search.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\svg-simple-icon.md                   
√ Successfully created: E:\git\web-material-user@last\website\components\panel.md                             
√ Successfully created: E:\git\web-material-user@last\website\components\iscroll-view.md                      
√ Successfully created: E:\git\web-material-user@last\website\components\Tab.md                               
√ Successfully created: E:\git\web-material-user@last\website\components\Tabs.md                              
√ Successfully created: E:\git\web-material-user@last\website\components\scroll-view.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\panel-group.md                       
√ Successfully created: E:\git\web-material-user@last\website\components\svg-icon.md                          
√ Successfully created: E:\git\web-material-user@last\website\components\dm-project.md

cli(preview): cannot `hot-reload`

Describe the bug

Cannot "hot-reload"

Uncaught (in promise) TypeError: event.on is not a function
    at main (index.html:20)

To Reproduce

vuese preview path-to-component.vue

Expected behavior

"hot-reload" works.

Which version do you use:
~~cli:v2.3.0~~ cli:v2.3.1

Additional information

Maybe can refer koy/bin/index.js#L41, but it seems like need to declare or ts-ignore window without including lib.dom.d.ts 🤔

online experience

We need an online playground, which brings two benefits:

Users can easily and quickly understand the functions of vuese.
Easy to reproduce the bug .

404 error when outDir is used with different path

Describe the bug
When you use a different output folder via Outdir="/some/folder/path" then it will not find the html file when you try to open the docs. It just shows 404 The requested Path could not be found.

To Reproduce
Steps to reproduce the behavior:

vuese gen outDir='resources/docs/1.0/vuese'
vuese serve --open

Expected behavior
Open the documentation

Which version do you use:
1.4.7

Typescript support?

Wondering if this plugin can parse .vue files with typescript, classes, and less styles?

e.g:

<template>
  <div>
    demo
  </div>
</template>

<script 
  lang="ts">

  import { Component, Vue } from 'vue-property-decorator';

  @Component
  export default class Demo extends Vue{
  
  }
</script>

<style 
   lang="less" 
   scoped>

</style>

How to set componentDesc ?

Describe the bug
How to set componentDesc ?

To Reproduce
https://vuese.github.io/vuese-explorer/

Expected behavior
i can set componentDesc

Which version do you use:
index.js/2.0.1 win32-x64 node-v8.9.3

Fails to detect prop name if quoted

Description

If the prop name is in quotes then it fails to be detected

Reproduce

Use the vuese explorer

This works, reporting a prop name of aprop

<script>
export default {
    name: 'BugShowcase',
    props: {
         aprop: { type: Boolean }
    },
}
</script>

This doesn't, reporting a prop name of undefined

<script>
export default {
    name: 'BugShowcase',
    props: {
         'aprop': { type: Boolean }
    },
}
</script>

Expected Behaviour

For 'aprop' to be treated like aprop

Version Info

$ npm view vuese version
1.4.7

$ npm view @vuese/cli version
2.1.1

use vuese preview my.vue but open a blank page

Windows下面运行gen直接NPM报错退出

0 info it worked if it ends with ok
1 verbose cli [ 'd:\Program Files\nodejs\node.exe',
1 verbose cli 'd:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'gen' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pregen', 'gen', 'postgen' ]

13 verbose stack Error: [email protected] gen: vuese gen --include="app/web/**/*.vue"
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Users\H004335.WTOIP\AppData\Roaming\nvm\v8.11.3\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at EventEmitter.emit (events.js:214:7)
13 verbose stack at ChildProcess. (C:\Users\H004335.WTOIP\AppData\Roaming\nvm\v8.11.3\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at emitTwo (events.js:126:13)
13 verbose stack at ChildProcess.emit (events.js:214:7)
13 verbose stack at maybeClose (internal/child_process.js:925:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

monorepo

Use monorepo to make the cli program and core module independent.

vuex-class support

I am not sure how this should be working.

I have this component:

<script lang="ts">
import Vue from 'vue'
import Component from 'nuxt-class-component'
import { Action } from 'vuex-class'

import { CommentType } from '~/types'

// @vue/component
@Component({})
/**
 * Stateless component.
 * The primary idea of this component is to illustrate,
 * how `@Action` decorator works.
 */
export default class ActionBar extends Vue {
  @Action('fetchComments')
  /**
   * Typed alias to Vuex `fetchComments` action.
   */
  fetchComments!: () => Promise<CommentType[]>
}
</script>

Which uses vuex-class to type actions from vuex.

When documentation is generated it defines fetchComments as a Prop. And I am not sure if it is a correct thing to do. Since fetchComments is an action from vuex.

What do you think?

Enhancement request - document Computed properties when flagged using // @vuese

When generating MixIns then computed properties are important to know about.

Also useful when documenting components for internal use.

I have created a pull request with this feature implemented. Compute docs #58

Modules not found for `parser` and `markdown-render`

Describe the bug
When importing the @vuese/parser and @vuese/markdown-render, it complains with the following:

Cannot find module '@vuese/markdown-render/index'
Cannot find module '@vuese/parser/index'

To Reproduce
Have the following file and compile with TypeScript

import MarkdownRender from '@vuese/markdown-render';
import { parser } from '@vuese/parser';

Expected behavior
It should build with no errors

Which version do you use:

@vuese/[email protected]
@vuese/[email protected]

Additional information
If I go into the type declarations and edit it as follows, it seems to work:

// node_modules/@vuese/parser/dist/index.d.ts
// line: 129
declare module '@vuese/parser/parseJavascript' {
    import * as bt from '@babel/types';
//    import { ParserOptions } from '@vuese/parser/index';
    import { ParserOptions } from '@vuese/parser';
    export function parseJavascript(ast: bt.File, options?: ParserOptions): void;
}

declare module '@vuese/parser/parseTemplate' {
//    import { ParserOptions } from '@vuese/parser/index';
    import { ParserOptions } from '@vuese/parser';
    export function parseTemplate(templateAst: any, options: ParserOptions): void;
}

// node_modules/@vuese/markdown-render/dist/index.d.ts
// line: 40
declare module '@vuese/markdown-render/renderMarkdown' {
    import { ParserResult } from '@vuese/parser';
//    import { RenderResult } from '@vuese/markdown-render/index';
    import { RenderResult } from '@vuese/markdown-render';
    export interface MarkdownResult {
        content: string;
        componentName: string;
        groupName: string;
    }
    export default function (renderRes: RenderResult, parserRes: ParserResult): MarkdownResult | null;
}

export default {...} vs const Something = {...}, export { Something }

Describe the bug

export default {
 // this works OK?
}

const MyThing = {
 // this does not work OK
 // only slots is generated?
}

export default MyThing

To Reproduce
Steps to reproduce the behavior:
Use the cli tool to parse a single component 'IButton.vue' => 'IButton.md'. Nothing especially fancy. Component content is:

<template>
  <div class="inline-block button" :class="classList">
    <slot name="content"/>
  </div>
</template>

<script>
const classMap = {
  sm: 'px-5 py-3 bg-blue text-white hover:bg-red',
  md: 'px-5 py-3 bg-red text-white hover:bg-red',
  lg: 'px-5 py-3 bg-green text-white hover:bg-red'
}

const IButton = {
  name: 'IButton',
  props: {
    // The color of the button
    color: {
      type: String,
      default: 'blue'
    },
    size: {
      type: String,
      default: 'md',
      validator: value => ['sm', 'md', 'lg'].includes(value)
    }
  },
  computed: {
    classList() {
      return classMap[this.size]
    }
  }
}

export { IButton }
export default IButton
</script>

Expected behavior
It should still work and generate all props, slots etc info

Which version do you use:
"@vuese/cli": "^2.0.1"

cannot generate event description

Describe the bug

<script>
export default {
    created () {
        const a = { a: 1 }
        
        // foobar
        this.$emit('select', a)
    },
}
</script>

# [name]

## Events

<!-- @vuese:[name]:events:start -->
|Event Name|Description|Parameters|
|---|---|---|
|select|-|-|

<!-- @vuese:[name]:events:end -->

To Reproduce

代码如上，采用 standard 标准不写分号
在 $emit 上是对象时无法生成 description
添加分号，或者添加括号，或者空对象则可以生成 description

Expected behavior

希望能生成 description

Which version do you use:

@vuese/parser: 2.0.1

Hide empty sections?

Hi, there is a way to hide empty sections inside the generated readmes? By default it generate empty sections where no comments are found,, like that:

## Events

<!-- @vuese:Icon:events:start -->
<!-- @vuese:Icon:events:end -->

## Slots

<!-- @vuese:Icon:slots:start -->
<!-- @vuese:Icon:slots:end -->

## Methods

<!-- @vuese:Icon:methods:start -->
<!-- @vuese:Icon:methods:end -->

Resulting in ugly documentation when a component doesn't have all the data.

Support multi-line comment

Describe the bug
Multi-line comment can not be expected show

To Reproduce

/* This is a description of the component
 * ASD
 * ASD
 */
export default {
...
}

// This is a description of the component
// ASD
// ASD
export default {
...
}

will show

This is a description of the component ASD ASD

Expected behavior

this is what i expected

This is a description of the component
ASD
ASD

生成文档过久，没反应

Describe the bug
运行 vuese gen，等了很久，没反应

这是配置文件

To Reproduce
1...在项目里运行指令 vuese gen

Expected behavior
正常生成文档

Screenshots
If applicable, add screenshots to help explain your problem.

Which version do you use:

Additional information
Add any other information about the problem here.

通过注释，不解析事件

用了.sync来传递父子组件数据，用了$emit触发，所以编译出的结果如上图。
希望可以通过注释，跳过对某些事件解析，这样生成的文档更清晰。

Feature Request: Mixin Support

If a component uses mixins then this is not represented in the generated documentation.

Components

If a component uses a mixin then either

a. they should be listed in a separate table
b. the mixin should be merged into the component and the resultant properties and methods documented (this would be preferable).

For example

<script>
export default {
    name: 'FeatureShowcase',
    props: {
         'aprop': { type: Boolean }
    },
    mixins: ['LocationMixIn', 'GeoMixIn']
}
</script>

Should Generate

FeatureShowcase

Props

Name	Description	Type	Required	Default
aProp	`Boolean`	`false`	-

Mixins

MixIns
LocationMixIn
GeoMixIn

Mixins

When documenting mixins it's helpful to also document some of the internals, eg computed properties and data

Being able to explicitly document computed properties using // @vuese would help greatly

Being able to document data properties in the same way as props would also help mixin clarity.

For example

    export default {
        name: 'FeatureDemo',
        data: () => { 
            return {
                // are you ready        
                isReady: false
            } 
        },
        methods: {
            // @vuese
            confirmedAtLocation() {
                // Do something ...
            },
            // @vuese
            cancelledAtLocation() {
                // Do something ...
            },
        },
        computed: {
            // @vuese
            distanceToLocation() {
                // Do something ...
            }
        }
    }

Should generate

FeatureDemo

Methods

Method	Description	Parameters
confirmedAtLocation		-
cancelledAtLocation		-
distanceToLocation		-

¢ Internal Fields

Data

Name	Description	Type	Default
isReady	Are you ready?	Boolean	False

Computed

Method	Description
distanceToLocation

Thank you

Empty tables <tr> at the bottom

Hi, the generated tables have an empty <tr> at the bottom.

Types are not set correcty

Describe the bug

Types from @Prop()s are not recognised properly.

Type:

export type RawCommentType = {
  id: number;
  body: string;
  email: string;
}

// We add rating only on the client (for demo purposes)
export type CommentType = RawCommentType & {
  rating: number;
}

Source: https://github.com/wemake-services/wemake-vue-template/tree/feature-typescript/template/client/types

And component:

<script lang="ts">
import Vue from 'vue'
import Component from 'nuxt-class-component'
import { Prop } from 'vue-property-decorator'

import { CommentType } from '~/types'

// @vue/component
@Component({})
/**
 * Comment component is used to represent a single user's comment.
 */
export default class Comment extends Vue {
  @Prop()
  /**
   * Passed comment from the parent component.
   */
  comment!: CommentType
}
</script>

Source: https://github.com/wemake-services/wemake-vue-template/blob/feature-typescript/template/client/components/Comment.vue#L32

Expected behavior

I expect that CommentType from annotation will be set as a type of this property.

Which version do you use: 2.2.3

SyntaxError: Unexpected token :

Describe the bug

If default is () => ({ a: 1, b: 2 }). We got SyntaxError: Unexpected token :
If default is default: () => ({}) or default: () => ({ a: 1 }). We got -.
If default is default(){return{}}. We got default() {\n return {};\n}.

To Reproduce

{
  props: {
    name: {
      default: () => ({ a: 1, b: 2 }),
    }
  },
}

Expected behavior

No error.
Add ` before and after the function code to avoid \n?

Screenshots

With Vuepress

Which version do you use:
@vuese/parser: 2.1.3

When the component has several methods, the generation seems to have bug.

When the component has more than one methods, the generation seems to have bug.

For example:

<template>
  <div>
    <!-- Form header -->
    <slot name="header">
      <!-- `<th>title</th>` -->
      <th>title</th>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    // The name of the form, up to 8 characters
    name: {
      type: [String, Number],
      required: true,
      validator () {}
    }
  },
  methods: {
    // @vuese
    // clear1: Used to manually clear the form
    clear1 () {
      // Fire when the form is cleared
      // @arg The argument is a boolean value representing xxx
      this.$emit('onclear', true)
    },

    // @vuese
    // clear2: Used to manually clear the form
    clear2 () {
      // Fire when the form is cleared
      // @arg The argument is a boolean value representing xxx
      this.$emit('onclear', true)
    }
  }
}
</script>

🚨 SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (7:7)

Describe the bug

vuese gen --include="src/apps/book/BookApp.vue"

🚨  The error occurred when processing:<path>/Book.demo.vue
🚨  SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (7:7)
    at _class.raise (<home>/.nvm/versions/node/v10.13.0/lib/node_modules/vuese/node_modules/@babel/parser/lib/index.js:4051:15)
    at _class.expectPlugin (<home>/.nvm/versions/node/v10.13.0/lib/node_modules/vuese/node_modules/@babel/parser/lib/index.js:5387:18)

To Reproduce

This is the Vue file:

<template>
  <div>
    Book demo
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'

  @Component
  export default class BookDemo extends Vue {

    name = 'Book.demo.vue'
  }
</script>

<style scoped>

</style>

Expected behavior
No Error

TypeScript 2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.

Describe the bug

TypeScript 2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.
[ts] 其类型缺少调用或构造签名的表达式无法使用 "new"。 [2351]

To Reproduce
Steps to reproduce the behavior:

const VueseRender = require('@vuese/markdown-render')
const vueseRender = new VueseRender(parserRes, renderOptions)

Expected behavior

no error

Screenshots

Which version do you use:
@vuese/markdown-render 2.02

Additional information

maybe use export = class Render {...?

https://www.typescriptlang.org/docs/handbook/modules.html

希望支持添加组件描述

组件比较多，组内成员英语也参差不齐，希望能支持添加组件描述信息，比如：

或者自定义菜单名称

Missing whitespace between first line and summary

Describe the bug
Rendered component documentation misses a whitespace between first line and further description.

To Reproduce

Create a vue component like so:

<script lang="ts">
import Vue from 'vue'
import Component from 'nuxt-class-component'
import { Action } from 'vuex-class'

import { CommentType } from '~/types'

// @vue/component
@Component({})
/**
 * Example of the functional Vue component.
 * 
 * By 'functional' we mean that this component does not have any
 * attached state. And only represents behaviour.
 */
export default class ActionBar extends Vue {
  @Action('fetchComments')
  /**
   * Typed alias to Vuex `fetchComments` action.
   */
  fetchComments!: () => Promise<CommentType[]>
}
</script>

Expected behavior

I expect this text to render with a whitespace between "Vue component" and "By 'functional'".

Screenshots

Which version do you use:

node --version: v10.15.3
@vuese/cli version: 2.2.1

Version 2.2.3 stopped to generate some components

Describe the bug

When I run vuese gen it only creates one document out of four.

./node_modules/.bin/vuese gen
✨  Successfully created: /Users/sobolev/Documents/github/wemake-vue-template/template/
website/components/Comment.md
⏳  Start generating...
success Done, let the hacking begin!
✨  Generated successfully

I have three components here: https://github.com/wemake-services/wemake-vue-template/tree/feature-typescript/template/client/components
And one here: https://github.com/wemake-services/wemake-vue-template/tree/feature-typescript/template/client/pages

But, only Comment.vue file is processed. It started to happen only after 2.2.3 release.

To Reproduce
Steps to reproduce the behavior:

Use https://github.com/wemake-services/wemake-vue-template/tree/feature-typescript
Use feature-typescript branch
Edit {{ name }} to name in package.json
Install @vuese/cli
Run ./node_modules/.bin/vuese gen

Expected behavior
I expect that all my .vue components will generate a .md file.

Screenshots

Which version do you use: 2.2.3

Bug: Methods not recognized

Component

<template>
  <div>
    <v-dialog v-model="isVisibleUserSignIn" max-width="500px" persistent transition="fade-transition">
      <v-card>
        <v-card-title class="headline">
          <span>Sign-in</span>
        </v-card-title>

        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12>
                <v-text-field :rules="eMailRules" required v-model="user.eMail" label="E-Mail"></v-text-field>
              </v-flex>

              <v-flex xs12>
                <v-text-field required v-model="user.password" type="password" label="Password"></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click.stop="setIsVisibleUserSignIn(false)">Cancel</v-btn>
          <v-btn color="primary" flat @click.stop="signInUserHandler">Ok</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import stubString from 'lodash/stubString'

import User from '../mixins/User'

export default {
  mixins: [User],

  data: () => ({
    eMailRules: [
      eMail => !!eMail || 'E-mail is required',
      eMail => /.+@.+/.test(eMail) || 'E-mail must be valid'
    ]
  }),

  computed: {
    isVisibleUserSignIn: {
      get () {
        return this.$store.state.Application.isVisibleUserSignIn
      },

      set (isVisibleUserSignIn) {
        this.$store.commit('SET_IS_VISIBLE_USER_SIGN_IN', isVisibleUserSignIn)
      }
    },

    isUserAuthenticated: {
      get () {
        return this.$store.state.Application.isUserAuthenticated
      },

      set (isUserAuthenticated) {
        this.$store.commit('SET_IS_USER_AUTHENTICATED', isUserAuthenticated)
      }
    }
  },

  methods: {
    async signInUserHandler () {
      try {
        const { body: { user, localStorage } } = await this.$http.post('/api/user/sign-in', this.user)
        window.localStorage.setItem('uid', localStorage)
        this.$store.commit('User/SET_USER', user)

        this.$set(this.user, 'eMail', stubString())
        this.$set(this.user, 'password', stubString())

        this.isUserAuthenticated = true
        this.isVisibleUserSignIn = false

        this.$_bus.$emit('snackbar', { message: 'Signed in.' })
        this.$_bus.$emit('user-signed-in')

        this.$router.push({ name: 'Tables' })
      } catch (error) {
        this.$_bus.$emit('snackbar', { message: 'There was an error.', error })
      }
    },

    setIsVisibleUserSignIn (isVisibleUserSignIn) {
      this.isVisibleUserSignIn = isVisibleUserSignIn
    }
  }
}
</script>

Results

Generate .md in the same vue components folder

Hi, is there a way to generate .md files beside the vue SFC components? I have this structure and i want to generate each md in the same component folder:

src/components
├── Button
│   ├── Button.story.js
│   └── Button.vue
├── Icon
│   ├── Icon.story.js
│   └── Icon.vue
├── Skeleton
│   ├── Skeleton.story.js
└── └── Skeleton.vue

Vuese doesn't support multiple args

Describe the bug
Vuese doesn't support multiple args doc

To Reproduce

export default {
    methods: {
        /**
         * @vuese
         * foo
         * @arg [boolean] bar description
         * @arg [number] baz description
         * @return [Number|undefined] description
         */
        foo(bar, baz) {
            /**
             * some-event
             * @arg [boolean] bar description
             * @arg [number] baz description
             */
            this.$emit('some-event', bar, baz);
            if (baz) return 1;
            return undefined;
        }
    }
}

Expected behavior
Vuese should generate 2 parameters for ‘foo’ and 'some-event', but all the parameters are located in the same table cell.

Screenshots

Which version do you use:

Additional information
It would be better to move all methods/events to the tree on the left side of doc tree and support param type like what JSDoc do.

Here is my expectation

[Feature] Recognise v-on events

Describe the bug
I am using for a lot of my basic components v-on="$listener" to simply pass through all the native events.

Example using vuetify:
<v-btn v-on="$listener">Label</v-btn>

As a result the parent component can use native modifiers with the custom component. Vuese doesn't automatically recognise events which are set using v-on and I couldn't find a way to manually declare it for documentation purposes other than putting it into the general description of the component.

Expected behavior
It would be great if Vuese could recognise events set with v-on - if that's not possible for all events, recognising that v-on="$listener" has been set and just adding an info that all native events are being passed on would already be great.

Which version do you use:
vuese/2.3.0

Props内默认值为function是解析异常

如图

期望：
只显示return后的内容

Feature: need Playground

This project is great 👍 .

The vue ecosystem lacks good documentation tools like docz or react-styleguidist.

But I think the documentation tool must have a Playground to know what the component is doing.

Like this:

The difficulty of static analysis

Hello everyone, I've had some difficult problems. Vuese uses @babel/parser to parse JavaScript into an AST to obtain descriptive information through a specific relationship between the annotation node and the target node, but this relationship can easily be broken:

The following can be handled correctly:

// event desc
this.$emit('some-event')

The following is not:

// event desc
someVar && this.$emit('some-event')

I don't think there is any way to cover every case, but we must not limit the user's code, look like the static analysis scenario is not feasible? Are there any other better options?

it can't generate events from this.$emit(CLICK_EVENT)

There is a coding rule in our team that event names are defined by const variables in upper case。The code is like:

const EVENT_CLOSE = 'close'
// ...
this.$emit(EVENT_CLOSE, e)

But in this case, the result of bt.isStringLiteral(args[0]) is false

if (args.length && bt.isStringLiteral(args[0])) {
     result.name = args[0].value;
}

so the events block is empty in the markdown file.

vuese / vuese Goto Github PK

vuese's Introduction

vuese

Document

Overview

@vuese/cli

@vuese/parser

Online experience

@vuese/markdown-render

@vuese/loader

@vuese/webpack-plugin

Roadmap

Contributing

Developer Resources

Component Notation

Component Documentation

Contributors

Author

vuese's People

Contributors

Stargazers

Watchers

Forkers

vuese's Issues

Description

Reproduce

Expected behavior

Version Info

Additional information

Description

Reproduce

Expected Behaviour

Version Info

Description

Reproduce

Expected Behaviour

Version Info

Components

FeatureShowcase

Props

Mixins

Mixins

FeatureDemo

Methods

Data

Computed

Recommend Projects

Recommend Topics

Recommend Org