[Bug]: Vue3-vite autodocs with docgen 'vue-component-meta' does no longer work with `defineSlots`

[Evertvdw]

Describe the bug

When using the new vue-component-meta to generate the docs page of a story it will break when you do that with a component that uses defineSlots.

In the reproduction I created two stories, ButtonSlots and Button. The one which has slots shows these docs: Notice it is missing meta information such as doc comments and default values. It will only show what you are using in the stories or defining in args/argTypes it seems.

The one without defineSlots looks like this:

Also secondary issue: HMR will not work for regenerating these autodocs. Only a hard restart of the server will generate updated autodocs, which does not result in a very good DX. If you want to reproduce the issue beware of this :)

To Reproduce

https://stackblitz.com/edit/github-admhcw?file=src%2Fstories%2FButton2.vue

System

No response

Additional context

No response

[vanessayuenn]

@larsrickert @chakAs3 @kasperpeulen is this a known limitation of vue-component-meta? Something to be addressed upstream?

[Evertvdw]

@vanessayuenn From what I understand volar uses this same package to provide intellisense in VSCode, and I do get proper intellisense on slots when defining them with defineSlots. So my guess would be that it is on the storybook side.

[larsrickert]

@Evertvdw The issue is that the slot props are not defined. Its a known limitation of vue-component-meta, so you need to change it to:

defineSlots<{
  /**
   * Use for custom content, instead of relying on 'icon' and 'label' props
   */
  default: (props: {}) => VNode[];
  /**
   * Override the default QSpinner when in 'loading' state
   */
  loading: (props: {}) => VNode[];
}>();

The issue is not Storybook related, vue-component-meta itself breaks if slot props are not defined

[larsrickert]

I agree to the got reloading tho that would definately be nice to have :)

[Evertvdw]

@larsrickert I see thanks! You say it's a known limitation but I could not find this in a quick search inside their repo. Is this documented somewhere?

Lets hope it will be fixed in the future, in my use case I want to extend some libraries component, and so I would pass an imported interface into defineSlots. If I have to add props I would have to manage that manually :(

[larsrickert]

@larsrickert I see thanks! You say it's a known limitation but I could not find this in a quick search inside their repo. Is this documented somewhere?

I don't think so, I also only noticed it while testing the integration with Storybook. If you want you could create an issue inside their repo

[Evertvdw]

@larsrickert vue-component-meta@2.0.7 will fix this issue, does this require a version bump on your end?

[larsrickert]

@Evertvdw Thanks for the update! Yes I will create a PR for this

[karsvaniersel]

Any update on this? Cause it still seems to be an issue. Everything loads fine on the "description" side of things. But it does not show a select dropdown with the actual options.

[larsrickert]

Any update on this? Cause it still seems to be an issue.

Which Storybook version are you using? Indon‘t have any issues with the latest 8.2.x