-
-
Notifications
You must be signed in to change notification settings - Fork 9.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue3: Fix source decorator to generate correct story code #22518
Conversation
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 |
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM and thanks 🚀
finally it is merged !! i have been dying for this 💌 thanks @kasperpeulen and @chakAs3 for your great work 👍 👍 |
@fouss did you use the v-bind directive in your custom story? |
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 |
@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 :
|
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 |
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.! |
@fouss What if you use the implicit render function? export default {
component: UIButton,
}
export const Playground: Story = {
name: 'Default'
} |
…t-fix Vue3: fix source decorator to generate proper story code (cherry picked from commit 6f0c2fc)
…t-fix Vue3: fix source decorator to generate proper story code (cherry picked from commit 6f0c2fc)
…t-fix Vue3: fix source decorator to generate proper story code (cherry picked from commit 6f0c2fc)
…t-fix Vue3: fix source decorator to generate proper story code (cherry picked from commit 6f0c2fc)
…t-fix Vue3: fix source decorator to generate proper story code (cherry picked from commit 6f0c2fc)
…t-fix Vue3: fix source decorator to generate proper story code (cherry picked from commit 6f0c2fc)
…t-fix Vue3: fix source decorator to generate proper story code (cherry picked from commit 6f0c2fc)
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:
which outputs this code snippet:
where, in previous versions, it output:
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/. |
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 |
Thanks @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. |
@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. |
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
MIGRATION.MD
Maintainers
make sure to add the
ci:merged
orci:daily
GH label to it.["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]