Vue3: Fix source decorator to generate correct story code

[chakAs3]

Closes: #21129
Closes: #21424

What I did

the source decorator snippet on the docs was not generating the complete and correct source code in a. complex custom template.

i rewrote the code based on the vue-compiler to get better result. now users can pick the snippet from docs block and use it in their project.

How to test

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"]

[aranoe]

This looks so much better than the current source code examples. I was really waiting for something like this!

Allowing to show muiltiple components in one story is very important and a common practise.

[chakAs3]

This looks so much better than the current source code examples. I was really waiting for something like this!

Allowing to show muiltiple components in one story is very important and a common practise.

I agree that is good practice to build components faster, in your Story with custom render , you really use Vue to build what you want not only the component that you want to document

[oemer-aran]

Is anything blocking the merge for this? Really looking forward to this change, as this is the only thing that is broken in the new storybook v7 for me 🙏

[chakAs3]

Is anything blocking the merge for this? Really looking forward to this change, as this is the only thing that is broken in the new storybook v7 for me 🙏

@shilman can someone review this PR to get merged, it is an old one.

I have added a test story for this.

and it has unit tests as well.

[kasperpeulen]

LGTM and thanks 🚀

[ReactiveCoderHK]

finally it is merged !! i have been dying for this 💌 thanks @kasperpeulen and @chakAs3 for your great work 👍 👍

[fouss]

I just test it, but it replace all props by just an object as "v-bind", is it really wanted ? because I think no one write vue props like that

ex :

becomes

[chakAs3]

@fouss did you use the v-bind directive in your custom story?

[chakAs3]

we just transpile what you write in your story template so if you use a v-bind directive it will be reflected the same in the source code, and this is a working code that you can copy and past into your app

[fouss]

@chakAs3 yes i made a script to automatically generate my props and values from my component props & default values, so my stories look like that :

export const Playground: Story = {
  name: 'Default',
  render: args => ({
    components: { UIButton },
    setup() {
      return {
        args,
      }
    },
    template: '<UIButton v-bind="args" />',
  }),
}
setDefaultProps(Playground, UIButton)

[fouss]

The idea behind that is to generate basic documentation of any component in like 0 minute with all props and default values based on component props, specific stories can come after

[chakAs3]

Yes I got the idea, I know that v-bind used just as utility to bind all the props, and this is not the case in real App, you can open a request to spread the props in source, but it is not sure that will be the intent of everyone, there is use-case where you can use v-bind to spread all props and add specific prop to override its value, In both case the result is same. In my initial code I was spreading the props separately. Let me know if you really need this so I can address this in next PR, with any other feedback or bug that spotted.!

[kasperpeulen]

@fouss What if you use the implicit render function?

export default {
  component: UIButton,
}

export const Playground: Story = {
  name: 'Default'
}

[rstainsby]

Thank you for these changes, they fix a lot of the issues I was facing.

Unfortunately, they seem to have broken some of my code snippets (tested in 7.1.0-alpha.42).

I have the following story:

export const IconOnly: Story = {
  ...Default,
  args: {
    icon: 'pi pi-check'
  }
}

which outputs this code snippet:

<template>
  <Button icon="()=>({})" />
</template>

where, in previous versions, it output:

<template>
  <Button icon="pi pi-check"/>
</template>

I am using Storybook with Vue 3 and PrimeVue component library.

This is happening with the use of the Button component which has an 'icon' prop and an 'icon' slot. If I were to take a guess I'd think that the slot and prop having the same name is causing the problem.

Here's the API for the component https://primevue.org/button/.

[chakAs3]

I'd think that the slot and prop having the same name is causing the problem.

Yes, you are right I'm working on solving this issue, by separating props from slots, I will get back to you. you once I figured out some solution

[rstainsby]

Thanks @chakAs3, is there an open issue for this that I can follow?

[chakAs3]

is there an open issue for this that I can follow?

there is a long discussion about this internally with the team I may create an RFC for this in case we have to change our API.
If there is an issue addressing this I will tag your in both of them

[JReinhold]

@rstainsby can you file a bug report for this, with a reproduction? Makes it easier for us to track it and not forget about it.