Dynamic source rendering for HTML

[adrian-potepa]

Describe the bug
"Show code" on docs page, doesn't show proper html as result of story function.

To Reproduce

1. Set story with templated html.
2. Click "show code" of history on docs page.

Expected behavior
"Show code" should build proper html code based on controls settings.

What we get now:

({ content, className }) =>
  `<button class="btn ${className}">${content}</button>`

What we should get:

'<button> class="btn btn--primary">Button text</button>'

Screenshots

Code snippets

export default {
  title: 'Button',
  excludeStories: ['Template'],
  argTypes: {
    content: { control: 'text' },
    tagName: {
      control: {
        type: 'select',
        options: ['a', 'span', 'button'],
      },
    },
    className: {
      control: {
        type: 'select',
        options: ['button--primary', 'button--secondary', 'border--primary100'],
      },
    },
  },
};

export const Template = ({ content, className }) =>
  `<button class="btn ${className}">${content}</button>`;

export const Primary = Template.bind({});
Primary.args = {
  content: 'Button',
  className: 'btn--primary',
};

System

 System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 14.2.0 - ~/.nvm/versions/node/v14.2.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v14.2.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.75
    Firefox: 79.0
    Safari: 14.0
  npmPackages:
    @storybook/addon-actions: ^6.0.26 => 6.0.26 
    @storybook/addon-essentials: ^6.0.26 => 6.0.26 
    @storybook/addon-links: ^6.0.26 => 6.0.26 
    @storybook/html: ^6.0.26 => 6.0.26 

Additional context
With ReactJS it works magnificent :)

[shilman]

Related to #11332 #11400 etc

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[kerryj89]

I think this should be high priority for the html flavor. I think it's been a showstopper or expected ootb functionality for many trying out storybook-html.

[andrewgtibbetts]

I've been bouncing around to every other thread about this for a couple weeks now and cannot get it figured out. So, my question: Is there currently any way with Storybook for HTML to render just the HTML in a Docs source that changes in response to args controls?

[shilman]

@andrewgtibbetts that's exactly what this issue is requesting as far as I can tell

[andrewgtibbetts]

Yes, the default, expected out-of-the-box functionality isn't there yet, but typically these threads get lengthy and contain temporary work-arounds and I was just wondering if there were any.

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.24 containing PR #15748 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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