Vue3: Fix CSF2 support with decorators

[chakAs3]

Closes #20903

that was one issue reported by user, CSF2 does not work in V7 + one issue I spotted in rendering decorated Stories without a defined render function

What I did

I fixed the rendering for stories with decorators both for CSF2 and CSF3 + some optimisation and code refactoring

How to test

1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template vue3-vite/default-ts
2. you need add some stories with decorators , CSF2 and CSF3

type CSF2Story = StoryFn<typeof Button>;

export const CSF2Button: CSF2Story = (args, { argTypes }) => ({
  components: { Button },
  props: Object.keys(argTypes),
  template: '<Button v-bind="$props" />',
})


CSF2Button.args = {
  label: 'Button',
};

Small.decorators = WithRenderTemplate.decorators = CSF2Button.decorators =[  
  () => ({
    template: '<div style="display: flex; padding: 20px; background-color: #cccc72;"><story /></div>',
  }),
];

4. Access CSF2 Button Story
   

Checklist

• Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests)
• Make sure to add/update documentation regarding your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Maintainers

• If this PR should be tested against many or all sandboxes,
  make sure to add the ci:merged or ci:daily GH label to it.
• Make sure this PR contains one of the labels below.

["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]

[shilman]

Hi @chakAs3 !!! Thank you for fixing this 🙏

I don't know Vue well enough to comment on the core changes. However, I have a few questions about the tests.

[shilman]

Why are we removing error handling here?

[chakAs3]

yes, i removed it because it will never happen as we don't need to define the template any more, especially in CSF3, but I don't know if CSF2 requires this... Please guide me on this, anyway will put it back for now

[chakAs3]

so if can see this will just work even if the story template has no component

export const WithRenderTemplate: Story = {
  args: {
    label: 'Button',
    size: 'small',
  },
  render(args: any){
    return ({
    components: { Button },
    setup() {
      return { args };
    },
    template: '<b> No Button Component  <pre>{{ args }}</pre></b>' ,
    })
  },
};

[chakAs3]

@shilman I have done more tests and even with CSF2 no error rises, However, Vue handles the case when there is no template defined,it shows a Warning message on the console.
let me know if still want me to keep it.

[shilman]

Also, this snapshot test looks wrong:

https://www.chromatic.com/test?appId=630513346a8e284ae244d415&id=63e68ea075d92124fe23bb78

Looking at the play function, it seems like the story rendering in chromatic is inconsistent with the play function assertions

https://github.com/storybookjs/storybook/blob/next/code/lib/store/template/stories/args.stories.ts#L65-L80

[chakAs3]

Also, this snapshot test looks wrong:

https://www.chromatic.com/test?appId=630513346a8e284ae244d415&id=63e68ea075d92124fe23bb78

Looking at the play function, it seems like the story rendering in chromatic is inconsistent with the play function assertions

https://github.com/storybookjs/storybook/blob/next/code/lib/store/template/stories/args.stories.ts#L65-L80

Yes should fail sorry i forgot to pass to reactiveArgs variable instead of context.args it should be fine now

[shilman]

Looks great! Any chance you can add a test case for CSF2 before we merge?