Skip to content
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

Merged
merged 13 commits into from
Jun 8, 2023

Conversation

chakAs3
Copy link
Contributor

@chakAs3 chakAs3 commented May 11, 2023

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.

image

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

@chakAs3 chakAs3 requested a review from kasperpeulen May 11, 2023 15:45
@chakAs3 chakAs3 changed the title Vue3: fix source decrocator to generate proper story code Vue3: fix source decorator to generate proper story code May 11, 2023
@aranoe
Copy link

aranoe commented May 11, 2023

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
Copy link
Contributor Author

chakAs3 commented May 11, 2023

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
Copy link

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
Copy link
Contributor Author

chakAs3 commented Jun 5, 2023

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.

image

and it has unit tests as well.

@chakAs3 chakAs3 requested a review from a team as a code owner June 5, 2023 19:57
@kasperpeulen kasperpeulen added the ci:daily Run the CI jobs that normally run in the daily job. label Jun 8, 2023
Copy link
Contributor

@kasperpeulen kasperpeulen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM and thanks 🚀

@chakAs3 chakAs3 merged commit 6f0c2fc into next Jun 8, 2023
@chakAs3 chakAs3 deleted the chaks/source-decorator-feat-fix branch June 8, 2023 09:14
@ReactiveCoderHK
Copy link

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

@JReinhold JReinhold changed the title Vue3: fix source decorator to generate proper story code Vue3: Fix source decorator to generate correct story code Jun 9, 2023
@fouss
Copy link

fouss commented Jun 9, 2023

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 :
Capture d’écran 2023-06-09 à 15 46 24
becomes
Capture d’écran 2023-06-09 à 15 44 39

@chakAs3
Copy link
Contributor Author

chakAs3 commented Jun 9, 2023

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

@chakAs3
Copy link
Contributor Author

chakAs3 commented Jun 9, 2023

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
Copy link

fouss commented Jun 9, 2023

@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
Copy link

fouss commented Jun 9, 2023

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
Copy link
Contributor Author

chakAs3 commented Jun 10, 2023

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
Copy link
Contributor

@fouss What if you use the implicit render function?

export default {
  component: UIButton,
}

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

@shilman shilman added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jun 14, 2023
github-actions bot pushed a commit that referenced this pull request Jun 14, 2023
…t-fix

Vue3: fix source decorator to generate proper story code
(cherry picked from commit 6f0c2fc)
@github-actions github-actions bot mentioned this pull request Jun 14, 2023
69 tasks
github-actions bot pushed a commit that referenced this pull request Jun 14, 2023
…t-fix

Vue3: fix source decorator to generate proper story code
(cherry picked from commit 6f0c2fc)
github-actions bot pushed a commit that referenced this pull request Jun 14, 2023
…t-fix

Vue3: fix source decorator to generate proper story code
(cherry picked from commit 6f0c2fc)
github-actions bot pushed a commit that referenced this pull request Jun 14, 2023
…t-fix

Vue3: fix source decorator to generate proper story code
(cherry picked from commit 6f0c2fc)
JReinhold pushed a commit that referenced this pull request Jun 15, 2023
…t-fix

Vue3: fix source decorator to generate proper story code
(cherry picked from commit 6f0c2fc)
JReinhold pushed a commit that referenced this pull request Jun 15, 2023
…t-fix

Vue3: fix source decorator to generate proper story code
(cherry picked from commit 6f0c2fc)
@github-actions github-actions bot mentioned this pull request Jun 15, 2023
9 tasks
JReinhold pushed a commit that referenced this pull request Jun 16, 2023
…t-fix

Vue3: fix source decorator to generate proper story code
(cherry picked from commit 6f0c2fc)
@shilman shilman removed the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jun 17, 2023
@rstainsby
Copy link

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
Copy link
Contributor Author

chakAs3 commented Jul 4, 2023

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
Copy link

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

@chakAs3
Copy link
Contributor Author

chakAs3 commented Jul 4, 2023

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
Copy link
Contributor

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug ci:daily Run the CI jobs that normally run in the daily job. vue3
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Unexpected closing tag on story [Bug]: vue3 story sourcecode does not reflect the preview
9 participants