Storybook: @storybook/html v6 breaks inline preview rendering of DOM nodes in Docs tab

[BeejLuig]

Describe the bug

It seems that as of @storybook/html v6, the inline preview render behavior for the Docs tab stringifies HTML nodes instead of appending them to the document. As far as I know, @storybook/addon-docs ~v5 correctly renders inline previews

To Reproduce

Below is an arbitrary code example to help illustrate the problem. A simple working project with the below setup is here: https://github.com/BeejLuig/storybook-canvas-example.

1. Basic setup

   // .storybook/main.js
   module.exports = {
     "stories": [
       "../src/**/*.stories.mdx",
       "../src/**/*.stories.@(js|jsx|ts|tsx)"
     ],
     "addons": [
       "@storybook/addon-links",
       "@storybook/addon-essentials"
     ]
   }
   

   js // .storybook/preview.js export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, }

2. Write stories

   // stories/Button.stories.js
   export default {
     title: 'Button',
     argTypes: {
       label: {
         control: 'text'
       },
       onClick: {
         action: 'clicked'
       }
     },
   };
   
   function Button({ label='', onClick=()=>{} }={}) {
     const btn = document.createElement('button');
     btn.textContent = label;
     btn.addEventListener('click', onClick);
     return btn;
   }
   
   export const Basic = (args) => Button({...args});
   Basic.args = { label: 'Button' }
   

3. Serve Storybook and compare render behavior between Canvas and Docs tabs

Expected behavior

Inline previews should properly render HTML nodes just as they are in the Canvas previews.

Screenshots

System:

Environment Info:

System:
OS: macOS 10.15.5
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 14.7.0 - /usr/local/bin/node
npm: 6.14.7 - /usr/local/bin/npm
Browsers:
Chrome: 84.0.4147.135
Firefox: 79.0
Safari: 13.1.1
npmPackages:
@storybook/addon-actions: ^6.0.12 => 6.0.12
@storybook/addon-essentials: ^6.0.12 => 6.0.12
@storybook/addon-links: ^6.0.12 => 6.0.12
@storybook/html: ^6.0.12 => 6.0.12

Additional context

This was an issue my team noticed when doing a Storybook 5 -> 6 upgrade, but exists for shiny new v6 projects too. After a cursory debug, I believe the issue is that the Canvas preview does a check to see if a storyFn() is a valid DOM node before deciding what to do with it, while the inline preview does something like dangerouslySetInnerHTML={{ __html: storyFn() }} without a check.

[lewispeel]

I had this problem when I upgraded to v6 and if I remember correctly it was to do with the inline stories, which I disabled;

// .storybook/preview.js
export const parameters = {
  docs: {
    inlineStories: false
  }
};

[shilman]

Ugh sorry about that! I'll try to get a fix in this week. 🙈

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.15 containing PR #12164 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[BeejLuig]

@shilman woo! Awesome thanks for the _super_ quick fix! Looks good on my end