Class attribute stripped from rendered Vue source

[dcrall]

I upgraded from 6.0 to 6.1 and noticed the new rendering for Vue stories as described in #11400. First of all, thank you for this work. It is an improvement overall. However, I noticed that both static and dynamic class attributes are being stripped from the source rendering removing important context from the story. Please see the following screenshots and note the two plain divs that start the template. They should both have a class attribute.

The stories are defined in an MDX file. Here is the code for the story:

export const formLayoutArgTypes = {
  gridDef: {
    name: 'gridDef',
    type: { name: 'string', required: false },
    defaultValue: 'grid grid-cols-1 gap-4',
    description: 'Tailwind grid definition'
  },
  ...
}

export const GridTemplate = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { AisInput },
  template: `
    <div class="container mx-auto mt-4">
      <div :class="gridDef">
        <AisInput id="first-1" label="First" description="You can go your own way" :class="firstClass" placeholder="First Name" />
        <AisInput id="last-1" label="Last" description="Don't stop believing" :class="lastClass" placeholder="Last Name" />
        <AisInput id="email-1" label="Email" description="So what, so what, so what you want?" :class="emailClass" />
      </div>
    </div>
  `,
});

<Canvas>
  <Story
    name="Simple Layout"
    args={{
      gridDef: 'grid grid-cols-1 gap-4',
    }}
    argTypes={{...formLayoutArgTypes}}
  >
    {GridTemplate.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Simple Layout" />

Am I doing something wrong here?

[dcrall]

@pocka, @shilman - I would appreciate your feedback. Thank you.

[shilman]

Thanks @dcrall, I'm guessing this is a bug in the vue rendering. As a temporary workaround you can set docs.source.type parameter to "code" to restore the old behavior.

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.9 containing PR #13327 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there's still more to do.

[dcrall]

Perfect. I tested with 6.1.9, and everything looks great. Thank you for the quick turnaround.

It was also cool to see that class attributes tied to story args appear dynamically when a value is added.