[Bug]: AutoDocs code view tags escaped and unusable

[dgibson666]

Describe the bug

Since upgrading to Storybook 8 (web components + Vite), when I view the code in the AutoDocs page, the tags are escaped (they were not in Storybook 7). It also shows a ton of whitespace (which has always been an issue).

Is there a way to clean this up, e.g., using Prettier, to be consistent with the HTML Addon? It's odd that Storybook has this functionality built in but I need a third-party plugin for the addon panel and the two views differ significantly.

Here's code for a simple button story (it's also showing the decorator-specified wrapping tag, which I would rather not):

<cbp-app theme="light"> 
      <cbp-button
        
        type=button
        
        
        
        
        
        fill=solid
        color=primary
        
        
        
        
      >
        Default
      </cbp-button>
    </cbp-app>

To Reproduce

I'm building components in Stencil JS 4.13, but I don't see this behavior in your storybook.new environments (tried HTML and Lit). I can update with a link to my actual repo once committed.

System

Storybook Environment Info:

  System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700F
  Binaries:
    Node: 18.18.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Edge: Chromium (122.0.2365.80)
  npmPackages:
    @storybook/addon-essentials: ^8.0.4 => 8.0.4
    @storybook/addon-links: ^8.0.4 => 8.0.4
    @storybook/blocks: ^8.0.4 => 8.0.4
    storybook: ^8.0.4 => 8.0.4

Additional context

No response

[vasicvuk]

I have the same problem on Storybook 7.6.17 and 7.5.3 so I guess it's not related to 8.0 version, on the other hand, lit render works but it causes double calls to constructor of components.