vue-styleguidist/vue-docgen-api

Toolbox to extract information from Vue component files for documentation generation purposes.

Isolated Vue component development environment with a living style guide

Start documenting now on codesandbox.io

Sponsors

A big thank you to our sponsors.

Marcello Bachechi, Walter Tommasi, Luca Ban and Ben Hong

Packages

vue-styleguidist takes the results of vue-docgen-api and creates a website to showcase and develop components.

---

vue-docgen-api parses vue components and load their documentation in a JavaScript object.

---

vue-inbrowser-compiler takes vue components code written in es6 and uses buble to make it compatible with all browser.

---

vue-cli-plugin-styleguidist configures vue-styleguidist to work with vue-cli 3.

---

vue-docgen-cli is a command line interface generating documentation files automatically from vue-docgen-api. Generate markdown by default but can be configured to generate whatever text format you desire.

Documentation

Docs are available at https://vue-styleguidist.github.io/ - we are still working on refining it and contributions are welcome!

Contributing

Please see contributing guide.

Note that the current monorepo relies on yarn workspaces. Don't forget to install yarn, npm i --global yarn, before cloning.

Authors and license

Artem Sapegin, Rafael Escala, Bart Ledoux, react-styleguidist contributors and vue-styleguidist contributors. Thanks to the team of react-styleguidist for the amazing tool.

We work on this project because we love the open-source community and learn new things.

Logo by Benjamin Cognard.

License

MIT License

vue-docgen-api's Issues

Doc generation of mixin props

I have a mixin that adds props to the component. Is it possible for those props to also be documented with the component they are added to?

The component has no name, add 'name' property on the Vue component

 The component has no name, add 'name' property on the Vue component 

My component has a parameter for the name property...

Code Splitting in Component Causes SyntaxError

I have ran into the following issue when using webpacks Code Splitting feature:

The component uses the feature to load a large carousel library when it is required. However this is causing errors when serving / building:

SyntaxError: Carousel.vue: Unexpected token (25:23)
Warning: Cannot parse Carousel.vue:
    Error: SyntaxError: Carousel.vue: Unexpected token (25:23)

Carousel.vue line 25 consists of:
const Carousel = () => import(/* webpackChunkName: "carousel" */ './LargeLibrary.vue');

I have tried removing the magic comments in the import, but it appears to be the import statement that is tripping up the build process.

The styleguide is generated but this particular Component is obviously missing from the output.

Great project by the way, finding it amazing to use!

Cannot parse Vuex mapGetters

Components having the object spread operator syntax as well as mapGetters mixins used are not being parsed. Can it be handled or is there are configuration available to ignore it so that at least the parsing is complete?

Appreciate your help. Thanks.

The prop parser is returning a String "null" for empty default values, instead of literal null.

As in the title, the prop parser seems to be casting null returns to a String value. This is problematic for any parsing logic that iterates over these properties.

For example, if I have a prop without a default, then prop.defaultValue is:

{ value: 'null', func: false }

I think an API should return a data type, and let the parser / visual representation reason about the data display. i.e. converting to a String before returning.

Using file name instead of name prop

Adding a name property to components by default isn't necessary unless the component is a recursive component. Doing so has the chance to obfuscate the component file name in Vue devtools if it doesn't exactly match the given name, as that's what's used to generate the tag. For example:

Is it possible to tell vue-docgen-api to use the basename of the file instead? I tried using propsParser and setting the name, but it seems like that fires too late.

Return the functional flag

If a component is functional doc its prop system works a little differently.

Docgen should return at least the functional flag.

{
  displayName: "myFunctionalComp",
  functional: true,
  ...
}

Use require extensions instead of vm.runInContext

Parser does not work with external prop validation library (e.g. prop-types), mixin generator pattern (a function returning mixin) and external props.

You should instead use https://github.com/jackmellis/require-extension-hooks-vue to require vue components.

P.S. Nice work guys. Loved vue-styleguidist.

Component tag name configuration

Allow for custom naming beyond the default of the file name

Inconsistent nulltype for descriptions

Empty description values have varying types; it would be helpful if they could be the same, just to make things easier when processing the results.

For example, a prop without a description will still contain description: "", while a slot without a description will contain description: null. Personally I would vote for description: "", as adding a key only to set it to null seems a bit redundant in my mind 😇

Cannot parse vue file when it uses dynamic import syntax

Hi,

This is a great tool for documenting stuff. However when we try and use it against a vue file that contains dynamic import syntax, like this;

'mydynamic-component' : () => import(/* webpackChunkName: "mydynamic-component" */ '../mydynamic-component');

The parser throws an error SyntaxError: unknown: Unexpected token

And points to the line number of the above code.

This is dynamic import syntax to lazy load certain components only when needed. We use a .babelrc file at the root which contains

{
"plugins": ["syntax-dynamic-import"]
}

and some additional references in the webpack.config.js file to achieve this.

Is there a way of making this component work with files containing this kind of syntax? I don't seem to able to make that section of the file ignored by the parser, and I can't find a way around this anywhere else currently. Any help would be appreciated!

Scoped slot

Is it possible to get indication if slot is scoped?
Is it possible to add property to the slot for scope (like description)

.babelrc not being picked up correctly?

Hi,

I'm trying to document a file which uses the class properties syntax, and having problems. This is a reduced test case:

<template>
  <div class="hello">
    Hello
  </div>
</template>

<script>
class Foo {
  static foo = "bar";
}

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

When I try to run vue-styleguidist build, I get the following error message (9:13 is referring to the static foo = "bar"; line):

SyntaxError: unknown: Unexpected token (9:13)

Warning: Cannot parse src/components/Hello.vue: Error: SyntaxError: unknown: Unexpected token (9:13)

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

This is my .babelrc, which is working fine with webpack:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime", "transform-class-properties"]
}

If I comment out all presets and plugins then webpack fails with the same SyntaxError, so I'm pretty sure my .babelrc is not being used by vue-styleguidist. Am I doing something wrong?

Thanks
David

npm WARN deprecated [email protected]

Hello,
This creates a warning on install:

npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Is it possible to document computed functions too?

The title says it all really. We have our methods all nicely documented, but would like to add this documentation to our computeds as well, so people can understand what they do. Is this an option / on the roadmap?

Thanks!

TypeError: _vuex.createNamespacedHelpers

Any .vue using Vuex with:

import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHeplers('name/space')

Outputs this when running vue-styleguidist:

Cannot parse src/Component.vue: TypeError: (0 , _vuex.createNamespacedHelpers) is not a function

Using:

• vue-docgen-api v2.3.1
• vue-styleguidist v1.4.8
• vuex v3.0.1

Can't use async methods

First of all: Really appreciate the work you put in vue-styleguidist. I have been trying to get something similar to run for some days now and just stumbled upon your repo yesterday. Amazing work!

Right now vue-docgen-api doesn't like async methods in components. Any change you could try to include them?

Really basic example:

<script>
  export default {
    name: 'form',
    data: {
      params: {},
      response: false
    },
    methods: {
      async onSubmit () {
        let  res = await api.post(this.params)
        this.response = response
      }
    }
  }
</script>

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"

Vue CLI version: 3.0.1
Reproduce step

• vue create my-project
• cd my-project
• vue add styleguidist
• yarn styleguide

Error: can't find vue loader

• yarn add vue-loader
• yarn styleguide

It' work but : We couldn’t find any components using these patterns:

• edit styleguide.config.js
• add: components: 'src/components/**/[A-Z]*.vue',

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspec t the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

Pug parser : Include not supported

Hi :)

I'm trying to generate my component documentation, but an error is raised:

TypeError: A child of Block (Pug:2) is of type Include, which is not supported by pug-code-gen. Please use pug-linker to preprocess this AST.

Here is the template parsed:

<template lang="pug">
    include configured.pug
</template>

If you need more information. Let me know.

Can I use command line or use in jsdoc conf.json?

Only program API?

@event tag just support one param

Now, the @event tag just support @type tag, and I just set one param.

/**
 * @event click
 * @type {Object}
 */

But, if I want to export two or more params, the vue-styleguidist can't support it.

I suggest to update the @event tag, like:

/**
 * @event click
 * @property {Event} event - DOM Event
 * @property {String} name - some name
 * @property {String} value - some value
 */
this.emit('click', event, 'name', 'value')

TypeError: _lodash2.default.debounce is not a function

It seems something is wrong when using the lodash library
Message when starting the server:
Cannot parse static/src/vue/components/table.vue: TypeError: _lodash2.default.debounce is not a function
It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

and the Vue file is like:

<script>
    import _ from 'lodash';  
    export default {
        methods: {
            someMethod: _.debounce(function () {}),
        }
    }
</script>

The issue looks like #16 but I'm using the latest version and still get the error

TypeError: (0 , _library.libraryFunc) is not a function

Hey all,

is there support for default functions?

example:

//@mypackage/packageA
export default function(){
return {}
}

//@mypackage/packageB

import myFunc from '@mypackage/packageA'

//error happens here
myFunc()

Any idea why this is happening. It looks like vue-docgen-api is having issues parsing default functions? I can get a codepen together if there is a place I can drop vue-dcogen-api to reproduce. Please let me know if I can help or fix the issue.

vue-property-decorator types for @Props are all "unknown"

When types are declared in vue-property-decorator syntax, they're not picked up properly by vue-docgen-api

<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
    @Prop({ type: String }) text;

    /** Style properties to be overriden using $.css syntax */
    @Prop({ type: Object, default: () => ({}) }) styles;
}
</script>

jsdoc description missing

There is a difference between how the github version of vue-styleguidist renders the styleguide and the npm version. I am posting the issue here (vs. in vue-styleguidist) since it originates from vuedocgen-api.

Simple case: Button.vue from examples/sections/:

/**
 * The only true button.
 */
export default {
	name: 'Button',
	/* omitting rest of component definition*/
}

The description / comment The only true button. is correctly displayed if vue-styleguidist is run from a clone of the github project.
If vue-styleguidist is installed via npm, it does not.

This seems to have to do with the fact that getVueDoc.js merges docJsFile and docComponent based on the value of the properties kind and longname, of each comment. When running from npm, longname is returned as default2 and _default2 (instead of default and _default), dropping the comment.

See these dumps for details:
stateDoc (via github).txt
stateDoc (via npm).txt

I don't know the implications of a simple fix such as:

  if (docJsFile) {
    docJsFile = docJsFile.filter(function (comment) {
      return comment.kind !== 'package';
    });
    docComponent = docJsFile.filter(function (comment) {
      return comment.longname === 'module.exports' || comment.longname.startsWith('default') || comment.longname.startsWith('_default');
    })[0];
  } else {

"Dependencies not found"

These dependencies were not found:

* fs in ./~/vue-docgen-api/dist/parse.js, ./~/vue-docgen-api/dist/utils/getComponentModuleJSCode.js and 15 others
* child_process in ./~/jsdoc-api/lib/explain-sync.js, ./~/jsdoc-api/lib/explain.js and 1 other
* module in ./~/babel-core/lib/helpers/resolve.js
* net in ./~/debug/src/node.js

Add support of vue-property-decorator

Cannot parse src\components\example\example.vue: Error: SyntaxError: unknown: Unexpected token (17:0)

The line in question is the @Component from vue-component-class/vue-property-decorator.

I've setup the styleguide.config.js to point to the appropriate webpack config as well.

Importing mixin brokes the parser

Hi, why this code breaks the parser?
<script> import myMixin from 'myMixin' export default { name: 'Card', mixins: [myMixin] } </script>

i see the following message and the component is not visible:
Warning: Cannot parse node_modules/pnbi-base/src/components/myMixin/myMixin.vue: TypeError: Cannot read property 'default' of undefine

myMixin is a .js file thats works in standard vue installation

Cannot parse components with data using vue-property-decorator

This is a blocker to using vue-property-decorator (my apologies for not catching this in the other issue!)

If you have a component that has any data without a decorator (which is how you declare data in vue-property-decorator), vue-docgen-api can't handle it.

An example component AppButton.vue

<script>
import { Vue, Prop, Component } from 'vue-property-decorator';
export default AppButton extends Vue {
    someData = 'my wonderful data';
}
</script>

Will throw the below stacktrace.... It seems that the error is mainly coming from vue-docgen-api's classPropHandler.js

TypeError: Cannot read property 'length' of undefined
    at NodePath.each (/Users/jessicasachs/projects/design-sys/node_modules/ast-types/lib/path.js:84:30)
    at NodePath.filter (/Users/jessicasachs/projects/design-sys/node_modules/ast-types/lib/path.js:119:14)
    at /Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/script-handlers/classPropHandler.js:16:63
    at Array.forEach (<anonymous>)
    at propHandler (/Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/script-handlers/classPropHandler.js:15:14)
    at /Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/parse-script.js:26:59
    at Array.forEach (<anonymous>)
    at /Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/parse-script.js:26:23
    at Array.forEach (<anonymous>)
    at executeHandlers (/Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/parse-script.js:25:33)
    at Object.parseScript [as default] (/Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/parse-script.js:21:5)
    at parseSource (/Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/parse.js:45:31)
    at Object.parseFile (/Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/parse.js:21:12)
    at Object.parse (/Users/jessicasachs/projects/design-sys/node_modules/vue-docgen-api/dist/main.js:9:13)
    at defaultParser (/Users/jessicasachs/projects/design-sys/node_modules/vue-styleguidist/loaders/vuedoc-loader.js:23:40)
    at Object.module.exports (/Users/jessicasachs/projects/design-sys/node_modules/vue-styleguidist/loaders/vuedoc-loader.js:28:10)

Parsing fails for components without script element

When trying to parse a component that does not have a script element, I get the following:

Warning: Cannot parse src/components/SomeComponent.vue: TypeError: Cannot read property 'lang' of null

The obvious workaround of adding a noop script element works(ie. parsing succeeds), but I thought I'd just add a note here.

A check should be added to verify the mixin is not already imported with ".js"

vue-docgen-api/src/utils/getMixin.js

Line 9 in ccdc2cc

const pathRequire = filePath + '.js'

if you import your mixin with something like:
import Mixin from 'mixin.js'
the line of code above
const pathRequire = filePath + '.js'
fails to build the pathRequire as it generates it as 'mixins.js.js' instead of mixins.js

Describe functional components props in a template

given this template

<div :style="props.style" :class="props.class"></div>

we should be able to describe both properties without risking a collision.

I would se a model along those lines

<!-- @prop style - the style of my div -->
<!-- @prop class - a class for my div -->
<div :style="props.style" :class="props.class"></div>

Unexpected token import/export

Since updating from 1.0.6 to 2.0.1 I get a SyntaxError for every component when I try to generate docs.

I get either Unexpected token import or Unexpected token export. Looks like es6 support got messed up?

Support flow when compiling docs

Have more than one mixin per js file

At the moment if a mixins.js file contains more than one file the document parser loads all mixins for each component.
It would be better to only load the mixin that are mentionned in the mixin property of the documented component.

example

import { mixin1, mixins2 } from './mixins'

export default {
  name: 'testMixins'
  mixins: [mixin1]
}

Here we should obtain documentation for testMixins extended with mixin1.
Instead, we get mixin1 and mixin2.

Problem with pug extend

Warning: Cannot parse components/*.vue: TypeError: A child of Block (Pug:2) is of type Extends, which is not supported by pug-code-gen. Please use pug-linker to preprocess this AST.

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries

vue typescript support?

interesting project!
any thoughts about how to tackle vue components with typescript ?

Add support pug slot

I copy this issue in this section because it refers on doc parser

vue-styleguidist/vue-styleguidist#45 (comment)

Populate events without comments

Is it possible to populate the events based off the presence of $emit? It would be nice to be able to populate the parser output with events automatically if this.$emit is called with a String as the first parameter, rather than expecting explicit documentation, much in the same as props and slots work.

_vue2.default.use is not function on vue2-google-maps component

Hi there.
I'm using vue2-google-maps component.

when i ran styleguide, i had messages that

Cannot parse resources/assets/js/components/quark/Map.vue: TypeError: _vue2.default.use is not a function

It usually means that vue-docgen-api don’t understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

Code that using vue2-google-maps is

import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'APIKEY'
  }
})

I think to have problem that using third-party plugin
how to solve this problem?

Need to parse all external dependencies

First, thanks for this very helpful project ! Its great !

Here is my issue / improvement ##idea:
I have issues documenting Vue components that use external code (type definition, helpers) imported with 'import' or 'require'.
In order to resolve these dependencies issues, I had the idea to perform a prebuild step using rollup in order to generates a single file containing my Vue component and all its dependencies (types definition, mixins, etc...). This work well and I get a nice '.js' file containing everything needed for documentation generation...
Sadly, vue-docgen-api doesn't support .'js' file input and only look for mixins in external files.

Would it be possible to enable '.js' file VueComponent support and enable mixins parsing in this very same file ?

You could even provide this rollup (or webpack) prebuild step as part of vue-docgen-api to make it available for everyone. :)

Regards,
Renaud

Error: Requires using expressions are not supported in examples.

Hi

I'm getting an error when trying to parse a Vue component that uses expressions in it's require, like so:

this.svg.content = require(`!html-loader!${webRoot}/images/svg/${this.name}.svg`);

... and was advised by the script to file an issue here.

Is this possible to get by somehow?

I am using this to read SVG files and inject them into DOM, like explained here: http://calebporzio.com/using-inline-svgs-in-vue-compoments/

Request: Add usage example with JSDoc

This project seems to be exactly what I'm looking for, but I'm unsure on how to include it in my JSDoc workflow. Could you provide a general setup guide to make ends meet?
Do I just have to include it as a plugin, like, create my project.js that holds several vda.parse(x) and return the result? Do I need to put more effort in?

It would be nice to have some examples on how to set it up. Thank you!

Error: JSDOC_ERROR: ERROR: Unexpected token import

I am getting the following error when trying to do a dynamic import within my component (a Webpack feature?):

JSDOC_ERROR: ERROR: Unable to parse /var/folders/cj/xqqjbxpj6ylbz5rs_89w8q2r0000gn/T/quxuq4lmsz8a5hd8zhg16b.js: Unexpected token import

Cannot parse src/elements/ImageMedia.vue: Error: JSDOC_ERROR: ERROR: Unable to parse /var/folders/cj/xqqjbxpj6ylbz5rs_89w8q2r0000gn/T/quxuq4lmsz8a5hd8zhg16b.js: Unexpected token import

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

Component script (reduced for brevity)

<script>
const lazySizes = () => import("lazysizes") // This is the problem line.
</script>

I am actually building my components via Vue Design System (https://github.com/viljamis/vue-design-system) which I beieve used Vue Styleguidist under the hood.

So, I'm not sure whether to report the problem there too.

Thanks.

Getting ReferenceError: HTMLElement is not defined in ONE Vue file -- but not 20 others..

When running the styleguidist -- I am seeing this error in ONE component .. but not a bunch of others that have the same reference to HTMLElement..

Here is the full error message:

Warning: Cannot parse src/app/shared/components/VFocusTrap/VFocusTrap.vue: ReferenceError: HTMLElement is not defined

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

Any ideas would be greatly appreciated!

Here is the code in question ...

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

<script lang="ts">
import Vue from 'vue';
import tabbable from 'tabbable';

const DISPLACED_ID = '__displaced__';
const CLASSNAME_DEACTIVATED = 'js-deactivated';

const bodyChildren = () => document.querySelectorAll('body > *');
const interactives = () => tabbable(document.body);
const deactivated = () =>
  document.querySelectorAll(`.${CLASSNAME_DEACTIVATED}`);

export default Vue.extend({
  name: 'VFocusTrap',
  props: {
    focusSelector: {
      type: String,
      required: true,
    },
    trigger: {
      type: HTMLElement,
    },
  },
  beforeMount() {
    Array.from(bodyChildren()).forEach((el) => {
      el.setAttribute('aria-hidden', 'true');
    });
    Array.from(interactives()).forEach((el) => {
      el.setAttribute('tabindex', '-1');
      el.classList.add(CLASSNAME_DEACTIVATED);
    });

    const displacerRoot = document.createElement('div');
    displacerRoot.setAttribute('id', DISPLACED_ID);
    document.body.appendChild(displacerRoot);
    document.body.classList.add('u-no-scroll');
  },
  beforeDestroy() {
    const displaced = document.getElementById(DISPLACED_ID);
    if (displaced !== null) {
      document.body.removeChild(displaced);
    }
    document.body.classList.remove('u-no-scroll');

    Array.from(bodyChildren()).forEach((el) => {
      el.removeAttribute('aria-hidden');
    });
    Array.from(deactivated()).forEach((el) => {
      el.removeAttribute('tabindex');
      el.classList.remove(CLASSNAME_DEACTIVATED);
    });

    if (this.trigger !== null) {
      this.tryFocus(this.trigger);
    } else {
      const initialFocus: HTMLElement = document.querySelector(
        this.focusSelector,
      ) as HTMLElement;
      this.tryFocus(initialFocus);
    }
  },
  render(h) {
    /** Render the HTML in a separate div */
    const displaced = document.getElementById(DISPLACED_ID);

    if (displaced !== null) {
      const renderRoot = document.createElement('div');
      displaced.appendChild(renderRoot);
      const content = h('div', this.$slots.default);
      const subVue = new Vue({ template: '<div><slot></slot></div>' });
      subVue.$slots.default = [content];
      subVue.$mount(renderRoot);

      Vue.nextTick().then(() => {
        this.tryFocus(tabbable(displaced)[0]);
      });
    }

    /** Render a blank div in the "correct" location */
    return h('div');
  },

  methods: {
    tryFocus(el: HTMLElement) {
      try {
        el.focus();
        // tslint:disable-next-line:no-empty
      } catch (e) {}
    },
  },
});
</script>

Default values for Props with type Object or Array display as functions

For a property in vue-property-decorator syntax, when you have a property that is an object, your default value must be a function that returns an object or array. This looks like:

@Prop({ type: Object, default: () => ({}) }) myObjectProp;

The documentation in vue-styleguidist picks that up as "() => ({})" -- which looks very gross in the generated docs.

Should the default value be the evaluated value of the function?

Plugin/Preset files are not allowed to export objects

So a general overview:

Nothing has changed from my devDependencies, I've probably updated minor patches but I'm having this error now and the components don't load on the documentation server.

While the build process works good, directly building/compiling with webpack, the problem stays with vue-styleguidist, that it outputs that error.

Does vue-styleguidist make use of any external babel 7 libraries?

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/sadiqevani/Ape Unit/aepp-components/node_modules/babel-preset-stage-2/lib/index.js

Warning: Cannot parse src/components/ae-view/ae-view.vue: Error: Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/sadiqevani/Ape Unit/aepp-components/node_modules/babel-preset-stage-2/lib/index.js

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.0.2",
    "babel-jest": "^21.2.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.7",
    "dotenv": "^6.0.0",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^7.0.1",
    "eslint-plugin-promise": "^4.0.0",
    "eslint-plugin-standard": "^3.1.0",
    "eslint-plugin-vue": "^4.5.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "jest": "^21.2.1",
    "node-sass": "^4.9.2",
    "sass-loader": "^6.0.6",
    "sass-resources-loader": "^1.3.3",
    "string-loader": "0.0.1",
    "url-loader": "^0.6.2",
    "vue": "^2.5.16",
    "vue-eslint-parser": "^2.0.3",
    "vue-jest": "^2.6.0",
    "vue-loader": "^13.5.0",
    "vue-styleguidist": "^1.7.12",
    "vue-template-compiler": "^2.5.17",
    "vue-test-utils": "^1.0.0-beta.7",
    "webfonts-loader": "^4.1.0",
    "webpack": "^3.8.1",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-merge": "^4.1.1"
  }

vue-template-compiler version mismatch

Updated to vue 2.4.2 recently and vue-styleguidist gives an error of a version mismatch between vue (2.4.2) and vue-template-compiler (2.4.1).

I traced it back to the dependency here for vue-template-compiler at 2.3.4

It works if I manually change it to 2.4.2 in my project's lock file.

Object / Array Destructuring not supported

Hello !

First, thank you all for this great job :)

It seems that object destructuring (or maybe even any assignation) made at the root of the <script> section is not recognized by the parser and make it crashes.

When a SFC contains something like this :

<template>
    ...
</template>

<script>
    ...
    const { HIGH, NORMAL } = AppTypes.FlagLevel
    <<OR>>
    const LOGS_ENABLED = config.logs.router
    ...
    export default {
        name: 'FlagBanner',
        computed: {}
        methods: {}
        ...
    }
</script>

This kind of warning is raised when compiling :

Warning: Cannot parse src/components/app/FlagBanner/FlagBanner.vue: TypeError: Cannot read property 'HIGH' of undefined

It usually means that vue-docgen-api does not understand your source code or when using third-party libraries, try to file an issue here:
https://github.com/vue-styleguidist/vue-docgen-api/issues

I tried in vain to find out where this issue could come from. Do you have any idea about where it actually crashes and how we could fix this ?

lowercasing property types

In the Vue docs, property types are Constructors and thus, all uppercased. From what I can tell, the prop parsing code seems to forcibly lowercase all prop type names; is there any reason for this?