storybook: [Bug]: vue3 story sourcecode does not reflect the preview

Describe the bug

In vue3 + Storybook 7.0.0-beta.48 context (edit : same issue with beta 51)

When we declare a story with static properties, and without any args, the sourcecode is not rendering correctly (preview is fine though) :

static properties are not rendered
slots are not rendered

Simple example with a Button component, having multiple variants that I need to display in one story :

export const Variants = {
    render: (args) => ({
        components: { MyButton },
        setup() {
            return {
                args,
            }
        },
        template: `
            <MyButton variant="primary">Primary</MyButton>  
            <MyButton variant="secondary">Secondary</MyButton>  
        `,
    }),
}

Generated sourcecode :

<MyButton />
<MyButton />

I have a different behavior when I declare the slot like so :

export const Variants = {
    render: (args) => ({
        components: { MyButton },
        setup() {
            return {
                args,
            }
        },
        template: `
            <MyButton variant="primary">{{args.defaultSlot}}</MyButton>  
            <MyButton variant="secondary">{{args.defaultSlot}}</MyButton>  
        `,
    }),
    args: {
        defaultSlot: 'Button',
    }
}

Generated sourcecode :

<MyButton variant="primary" />
<MyButton variant="secondary" />

This time the variant property is correctly displayed, but still not for the slot.

To Reproduce

https://github.com/KevinCarnaille2/sb-vue3-sourcecode-issue

No response

System

Environment Info:
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  npmPackages:
    @storybook/addon-docs: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/addon-essentials: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/addon-interactions: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/addon-links: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/addons: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/channel-postmessage: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/channel-websocket: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/client-api: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/preview-web: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/testing-library: 0.0.13 => 0.0.13 
    @storybook/vue3: 7.0.0-beta.48 => 7.0.0-beta.48 
    @storybook/vue3-vite: 7.0.0-beta.48 => 7.0.0-beta.48

Additional context

No response

About this issue

Original URL
State: closed
Created a year ago
Comments: 22 (11 by maintainers)

Most upvoted comments

Hi yes I’m opening a pr to fix this. With extra tests :

chakAs3 on Feb 24, 2023

Do we have any news about this ? I’ve updated to the last RC, and I’m still having the same slots issues, with sourcecode not reflecting what he give in entry

Hi @KevinCarnaille2 We are going soon to merge the PR that fixes that, or maybe i can split the large PR to accommodate only the source code feature.

chakAs3 on Mar 30, 2023

hi @KevinCarnaille2 how are doing. long time 😄. it is already on latest version

chakAs3 on Jun 20, 2023

Hi @Nagell , first thank you for your detailed feedback, actually the PR that addresses source decorator not yet merged to ‘next’ branch, here is the PR #22518 . Anyway i will be testing your code to see if we still have this issue on the recent PR

chakAs3 on May 22, 2023

Hi. @KevinCarnaille2 can you pull this repo and test the source snippet and let me know if this is fine https://github.com/storybookjs/vue3-vuetify-examples

chakAs3 on Apr 4, 2023

yes @KevinCarnaille2

chakAs3 on Mar 4, 2023

At the moment, the only way to properly display the source code is to store the template in a const, and reapply this const to the parameters.docs…

const template = `
<MyButton variant="primary">Primary</MyButton>  
<MyButton variant="secondary">Secondary</MyButton>  
`;

export const Variants = {
    render: (args) => ({
        components: { MyButton },
        setup() {
            return {
                args,
            }
        },
        template,
    }),
    parameters: {
       docs: {
          source: {
               code: template
          }
       }
    }
};

KevinCarnaille2 on Feb 17, 2023