Extract props/slots/events documentation from source code

[tbusser]

Clear and concise description of the problem

I would like Histoire to extract the props/slots/events documentation from the source code and display it as documentation within Histoire. By reusing the documentation in the source code it will prevent me from having to write it again somewhere else. This will ensure there is a single source of truth for the documentation of these props/slots/events.

Suggested solution

There is a package which can extract this information from your Vue source code, it is called vue-docgen-api. This outputs an object containing the information it was able to find in the code. With this object it should be possible to show the documentation for props/slots/events in Histoire.

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

[elevatebart]

Really good idea @tbusser I need to get this to work.

@Akryum I will probably do most of the backend work. I am counting on your designers' talents to make it look good once we have the data.

[sheremet-va]

Maybe we can use https://github.com/johnsoncodehk/volar/tree/master/packages/vue-component-meta ?

[TO-koswald]

Is this still on the horizon? This is the only major thing that's missing for us to switch from storybook. Overall very pleased with histoire.

[elevatebart]

Hello @TO-koswald

It is still on the horizon. I have been kinda swamped lately. I dropped the ball a little. I am getting back on it as we speak.

I will have more news about it in a few hours.

But first, one question:

Since a .story.vue file is not necessarily associated with one component only, how would you explicit this connection so this documentation can find its place in the navigation? Would you have a separate story/page for component data? Would you have a special import?

Thanks for your insights. Bart

[TO-koswald]

Hey @elevatebart, good to hear about this update.

I quite like the way storybook solved it by just adding it to the controls. Kinda like that:

They also generate a table in the Docs tab:

I much prefer to have everything as automatic as possible and not use a special import, but detect which components are used on the root level (I think histoire already does that) and then extract the docgen info and apply it to the controls. For docs a similiar table as to what storybook does would be awesome.