Show the full story source

[visualjerk]

Is your feature request related to a problem? Please describe.

Currently the story source only shows the template part of the story. While this is sufficient for some cases, there are stories, where it is not.

Imagine writing the story for a form component, which depends on a data object and a validation scheme of a specific syntax in order to work. In such case a developer needs the whole code of the story to see how the component is used.

Right now the only way to show the additional code inside storybook is to duplicate it in the summary like so:

This however disconnects the js part of the story from the template part and requires duplicating the story code.

Describe the solution you'd like

It would be really nice to have an option to configure, which parts of the story you would like to see in the story source block.

Example of the configuration:

...
info: {
  components: { SpForm },
  source: 'full' // 'template' (default) | 'full' | [ array of story props ]
}
...

Example of story source output:

[pocka]

@visualjerk

Imagine writing the story for a form component, which depends on a data object and a validation scheme of a specific syntax in order to work. In such case a developer needs the whole code of the story to see how the component is used.

I agree, but it's hard to implement this feature without messy loader setup IMO. My recommendation is to use storysource addon and set source: false.

Here's a detail: In order to show a full story object, we need to parse it in a compile-time, which means users must set up the loader of storysource addon (or something like similar) and storybook-addon-vue-info parse it. Though it's technically possible, depending on storysource requires us removing backward compatibility (SB v4). Of course, we can create custom loader and ship it with the addon but it increases management cost (Honestly I don't want to add more complexity. We have official Docs-mode support now)

[pocka]

Now, official Docs addon has Vue.js support and it shows whole story code by default. I'm closing this issue because it is now deprecated in favor of the Doc addon. FYI: I put a simple migration guide on the top of README.