storybookjs/storybook

[Bug]: "Show code" shows the story but the tags are displayed as HTML entities

Ouverte

#30 705 ouverte le 27 févr. 2025

 (10 commentaires) (3 réactions) (0 personne assignée)TypeScript (10 058 forks)batch import
block: sourcebughelp wantedneeds reproductionsev:S3web-components

Métriques du dépôt

Stars
 (89 909 étoiles)
Métriques de merge PR
 (Merge moyen 7j 22h) (184 PRs mergées en 30 j)

Description

Describe the bug

I have a Stencil x Storybook repository configured, where I am creating some Stencil components and showing them in Storybook.

Here is the story I have configured for my component:

const AnonymousTemplate = args => `<deepgram-header active="${args.active}" debug="${args.debug}"></deepgram-header>`;

export const Anonymous = AnonymousTemplate.bind({});
Anonymous.args = {
  active: 'playground',
  debug: false,
};

Anonymous.parameters = {
  viewport: {
    defaultViewport: 'desktop',
  },
  layout: 'fullscreen',
};

When I run the app, everything but the code view works great. This is what appears in the show code box:

&lt;deepgram-header active="playground" debug="false"&gt;&lt;/deepgram-header&gt;

Reproduction link

https://github.com/deepgram/deepgram-components

Reproduction steps

  1. Clone the repository
  2. npm install
  3. npm start
  4. Click to the header component
  5. Click show code on either of the stories shown there

System

Storybook Environment Info:

  System:
    OS: macOS 15.4
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.9.0/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm <----- active
  Browsers:
    Chrome: 133.0.6943.127
    Safari: 18.4
  npmPackages:
    @storybook/addon-essentials: ^8.6.0 => 8.6.0 
    @storybook/addon-viewport: ^8.6.0 => 8.6.0 
    @storybook/blocks: ^8.6.0 => 8.6.0 
    @storybook/experimental-addon-test: ^8.6.0 => 8.6.0 
    @storybook/test: ^8.6.0 => 8.6.0 
    @storybook/web-components: ^8.6.0 => 8.6.0 
    @storybook/web-components-vite: ^8.6.0 => 8.6.0 
    storybook: ^8.6.0 => 8.6.0

Additional context

This is using @storybook/web-components and @storybook/web-components-vite to work with Stencil components. Everything is working extremely well, except for this code view.

Guide contributeur