Search code examples
javascriptweb-componentstorybooklit

Storybook web component code examples extra comment tags

We are trying to create a design guideline with lit and want to use storybook to document our components. Here is a example story (in mdx format) that I use:

import { html } from 'lit';
import { Canvas, Story } from '@storybook/addon-docs';
import './gr-button';

export const Template = (args) => html`<gr-button 
    ?secondary=${args.variant === 'secondary'} 
    ?disabled=${args.disabled} 
    ?block=${args.block} 
    ?medium=${args.size === 'medium'} 
    ?small=${args.size === 'small'}>${args.label}</gr-button>`;

<Canvas columns={1}>
  <Story name="Secondary Block disabled button"  args={{ disabled: true, variant: 'secondary', block: true, label: 'Fill the form' }}>
    {Template.bind({})}
  </Story>
</Canvas>

And here the result that Storybook shows in "Show code" panel in the UI:

<gr-button secondary="" disabled="" block=""><!--?lit$754556085$-->Fill the form</gr-button>

Anyone know how to get rid of empty values for boolean attributes and that lit comment tag?

Solution

  • In the end, I needed to clean up them with transformSource hook of Storybook's docs parameter. So in your preview.js:

    export const parameters = {
  docs: {
    transformSource: source =>
      source
        .replace(/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g, '')
        // Clean empty boolean attribute values
        .replace(/=\"\"/g, ''),
  },
};