Proposal: Add config option to ignore decorators and show only the HTML of the story

[sergiu-statache]

As you know, Storybook supports decorators which can be multiple HTML tags wrapping the main Story.

Now if you go to the HTML tab to see the HTML you'll see the Story HTML, but if the story has some decorators attached to it, the HTML tab will show the HTML with the decorators (which is confusing for some devs because that's not the HTML of that component - decorators are only to facilitate the display of the component in Storybook)

It would be great if a config option would be added for this plugin to ignore decorators when showing HTML.

Thanks and hope all is clear!

[dgibson666]

I'm using a decorator to wrap my stories and I get around this by specifying a new "root" in preview.js:

const preview = {
  parameters: {
    html: {
      root: "my-wrapper-tag", // default: #storybook-root

Using that as the root omits it from the HTML output in your addon panel.

[McGern]

Would love for this to be an option. The workaround mentioned by @dgibson666 is suitable for now, but having this on individual levels, and needing to make sure that the correct class is set in the parameters gets a bit cumbersome.

BTW, for future readers, the "root" is the css selector, so if you have a class "my-root-class", it would be ".my-root-class"

[McGern]

Just to add to what's already here.

If you add the wrapper to only some stories, the plugin will not show html on other stories, showing the message "my-custom-tag not found", so there is no fallback.

In order to not have to add the parameter html selector for every story that has a decorator (because in my instance not all stories needed a decorator) I added this, so the storybook-root would be found instead. Gist is that the root selector is using querySelector behind the scenes, so you can add any valid selector to detect the root. e.g.

const preview = {
  parameters: {
    html: {
      root: 'decorator-root, #storybook-root:not(:has(decorator-root))'

For my instance, I'm throwing in a custom html tag (technically a hack) because I haven't declared or initialised it, I'm just putting display block in the css.

<decorator-root>

So the root selector above will match the custom tag if it exists, or the storybook root if it doesn't. Needed the not has combo because the top down selector will find the storybook root first.

The root selector could be any combo of matches, so you could have multiple different tags or classes, doesn't really matter so long as the query selector can find it.