Need to parse all external dependencies

[renaud-dc]

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

[rafaesc]

Hi @renaud-dc,

But the source where rollup takes to convert in a bundle, you could parse it with vue-docgen-api.
Though I am not sure of understanding it.

Regards

[renaud-dc]

Hi @rafaesc,

Here is a code sample I'd like to parse using vue-docgen-api but that is not yet supported.

I declare my properties types in a-types.js

export const MyPropType = {
  type: [String, Number],
  default: undefined,
  validator(value) {
    if (typeof value === 'string') {
      return value.match(/^-?\d+(%)?$/);
    }
    return Number.isInteger(value);
  }
};

...

Then, I use these types in one (or more) mixin mixin.js file:

import * as A from './a-types';

export default {
  props: {
    myProp: A.MyPropType
    ...
  },
  computed: {
    ...
  }
  ...
};

And then, I use these mixins in my components as follow:

<template>
  <span ...>
    <slot/>
  </span>
</template>


<script>
import { default as M } from './mixin';

export default {
  name: 'my-component',
  mixins: [M],
  props: {
    ...
  }
  ...
}
</script>

For instance, vue-docgen-api is not able to retrieve the properties types that are imported by the mixin.
Does this code sample makes my request clearer ?

Regards,
Renaud

[rafaesc]

Hi @renaud-dc,

Did you try to add @mixin tag in mixin.js file?

https://github.com/vue-styleguidist/vue-docgen-api#mixins-or-extends

[renaud-dc]

Hi @rafaesc ,

Sure, I have the /** @mixin */ tag in my mixin.js file.
The issue is that in the final documentation, types of mixin properties are not documented since these types are defined in a another file.

Regards,
Renaud

[rafaesc]

@renaud-dc I have already understood haha.

Yes, in an old version (2.0.0) I create a feature with webpack
https://github.com/vue-styleguidist/vue-docgen-api/tree/v2.0.0#parsefilepath--webpackconfig-

That version extracted all the external scripts of the components, but the bad news was that it was too slow (at least when I integrated it with vue-styleguidist), I used this library enhanced-require to extract them.

So unfortunatly, I don't sure how to handle it. But feel free to send a pull request ;-)

[renaud-dc]

@rafaesc
Ok, thanks for your support !
I already gave it a try, but for instance it breaks some vue-docgen-api features...
And it is much more slower !!! (which isn't an issue for my usage)

I'll keep you updated if I get something productizable. :)

[elevatebart]

Hello @renaud-dc ! Can you please install 3.1.0 or vue-styleguidist 3 and tell me if you still have the issue ?

[renaud-dc]

Hi @elevatebart ,

Thanks for following up. :)
Currently, npm repository latest released version is 3.0.1 (https://www.npmjs.com/package/vue-styleguidist).

I tried with that version and got following error:

Warning: Cannot parse src/lib/core/components/flex/aui-flex.vue: Error: No suitable component definition found

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

./node_modules/react-styleguidist/lib/rsg-components/Editor/EditorLoader.js 36:3
Module parse failed: 'import' and 'export' may only appear at the top level (36:3)
You may need an appropriate loader to handle this file type.
|                       var _this2 = this;
|
>                       import('rsg-components/Editor/Editor').then(function (module) {
|                               _this2.setState({ editor: module.default });
|                       });
 @ ./node_modules/react-styleguidist/lib/rsg-components/Editor/index.js 1:0-61 1:0-61
 @ ./node_modules/react-styleguidist/lib/rsg-components/slots/index.js
 @ ./node_modules/vue-styleguidist/lib/utils/renderStyleguide.js
 @ ./node_modules/vue-styleguidist/lib/index.js
 @ multi ./src/lib/styles/index.js ./node_modules/vue-styleguidist/lib/index ./node_modules/react-dev-utils/webpackHotDevClient.js

I use following webpack config:

const webpackConfig = env => {
  let config = {
    module: {
      rules: [
        // Vue loader
        {
          test: /\.vue$/,
          exclude: /node_modules/,
          loader: 'vue-loader'
        },
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.(css|scss)$/,
          use: ['style-loader'].concat(cssLoaders)
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    },
    plugins: []
  };

Regards

[elevatebart]

@renaud-dc Would you share how aui-flex.vue is exported ?

export default {
  name: 'aui'
}

or

export const test = {
  name: 'aui'
}

or even

const s = {
  name: 'aui'
}

export default s

vue-docgen-api seems to not pickup on your component.