Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic source rendering for HTML

See original GitHub issue

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

To Reproduce

Set story with templated html.
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 😃

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

shilmancommented, Aug 4, 2021

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.

1reaction

kerryj89commented, May 28, 2021

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.

Top Results From Across the Web

How Dynamic Rendering Works Using HTML And CSS?

Dynamic rendering is a helpful technique that can be used to optimize the delivery of content. In the dynamic rendering approach, the content ......

Dynamic Rendering | Google Search Central | Documentation

Dynamic rendering is a workaround for indexable, public JavaScript-generated content that changes rapidly, or content that uses JavaScript features that aren't ...

What is Dynamic Rendering? [+How It Impacts SEO]

Dynamic rendering is creating a version of your content specifically for search engine bots and creating another for users.

The benefits of dynamic rendering for SEO

Dynamic rendering means “switching between client-side rendered and pre-rendered content for specific user agents,” according to Google. Below ...

Google: Dynamic Rendering Is A Workaround and Not A Long ...

Dynamic rendering is a workaround and not a long-term solution for problems with JavaScript-generated content in search engines. Instead, we ...