vue-docgen-api doesn't support mixins which are result of function execution

Hi, I’m trying to use vue-styleguidist in a project which uses next pattern for mixins

// mixin.js
const factory = () => Vue.extend({});
export default factory();

// component.vue
<script>
import Vue from 'vue';
import mixin from './mixin';

export default Vue.extend({
  name: 'example',
  mixins: [
    mixin
  ]
});
</script>

All these components will be ignored by vue-docgen-api The same issues happens for nested extend like

// component.vue
<script>
import Vue from 'vue';

export default Vue.extend().extend({
  name: 'example2',
});
</script>

Do you think these cases should be covered as well? And do you have plans to implement this functionality?

Thanks, Sergey

[kyleoliveiro]

Thanks for reopening the issue. I’ll describe my use case below.

I have a mixin named CustomTagProvider which I use to provide a tag prop to components so users can choose to render their root elements using a custom html tag. I want the default value of tag to be able to be varied based on which component this mixin is applied on.

mixins/CustomTagProvider.js

export default ({ value = 'div' } = {}) => ({
  props: {
    tag: {
      type: String,
      default: value,
    },
  },
});

[elevatebart]

Hello @kyleoliveiro, Hello @steplov,

vue-docgen-api, since version 4.27.0 can extract some information from mixins factories (functions returning a mixin).

• The info extracted has to be static and contained in the return statement of the function.
• It also works if it is an arrow function and the object returned is a valid component.

Hope this works for you, if not, please feel free to re-open this issue 😉