search

whitespace-se / storybook-addon-html

A Storybook addon that extracts and displays compiled syntax-highlighted HTML
Other
95 stars 43 forks source link

Showing rendered DOM code vs Story code #108

Open dgibson666 opened 10 months ago

dgibson666 commented 10 months ago

I'm using the HTML add-on @whitespace/storybook-addon-html version 5.1.6 with HTML/Vite Storybook 7.5.1 for web components built with Stencil. When I first enter a story and view the HTML tab, it oftentimes shows me the rendered content instead of just the Story content needed to copy and paste the components into an app. E.g., on the first load, I see this (notice the button tag and class="hydrated"):

<my-button
  type="button"
  fill="solid"
  color="primary"
  class="hydrated"
  ><button type="button">Default</button></my-button
>

But after a hard reload, it removes the content rendered by the web component and shows the base story code, as I'd like, which can be copy-pasted into an application using our components:

<my-button
  type="button"
  fill="solid"
  color="primary">
  Default
</my-button>

I'm a little confused how this ever worked if you're using innerHTML to retrieve the HTML from the DOM. I never saw this problem on a previous project in Storybook 6, but I don't have access to that anymore.

dgibson666 commented 10 months ago

Looks like this is related to the discussion here: https://github.com/whitespace-se/storybook-addon-html/pull/61

tanel-terras commented 9 months ago

We actually had the exact same problem with Storybook 6 too. I am also not sure how this worked before but in our project it actually did work for some time. We stopped using the plugin after we noticed that other devs are copying rendered html.

dgibson666 commented 5 months ago

When upgrading to Storybook 8, I also switched to web-components + Vite and upgraded this addon to v6.x and this issue appears to be gone now.

Update: I may have spoke too soon. When I re-enabled our custom viewport sizes, I started seeing the issue of the HTML tab showing rendered code instead of source/story code (using web components). I've disabled the custom viewports for further testing, but as soon as I did so, the issue seems to have gone away. I don't know how they are related - if there's a speed impact or something - but I will do further testing.

dgibson666 commented 5 months ago

If I click the "remount component" button on the web components/vite version while viewing the HTML tab, about 1 in 10 times it will show the full rendered content instead of the proper source code to copy and paste. Storybook 8.0.5 and @whitespace/storybook-addon-html": "^6.0.2",

stof commented 1 month ago

if you want to see the source code of the story instead of the rendered HTML, use @storybook/addon-storysource instead.

dgibson666 commented 1 month ago

I think the 99% use case is that people want to copy the code (with adjustments from controls) from Storybook that can be used in an application. Neither storysource nor rendered DOM code fit that bill in regard to web components. This plugin worked great back in Storybook 6 with the HTML version for Stencil-built web components on a previous project. But now it's flaky and inconsistently jumps between showing pre-hydrated and post-hydrated code and copying post-hydration code into an app will usually break things or not give the intended results.

CosmicEvil commented 3 weeks ago

We are running into the same issue, especially with scoped stencil components. We are trying to rewrite the code by transforming it but it would be good that we have a solution for this.