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

Vue/Vue3: Fix decorators in StoryStoreV7 #18375

Merged
merged 6 commits into from
Jun 1, 2022
Merged

Conversation

yannbf
Copy link
Member

@yannbf yannbf commented May 31, 2022

Issue: N/A

What I did

Both Storybook for Vue and Vue3 had issues when running in StoryStoreV7 mode. Reason being that Storybook needed a applyDecorator function as a preset, but it wasn't exported from the presets. This PR fixes that by exporting the function correctly.

For Vue2 projects the entire Storybook would break with
image

For Vue3 projects, Storybook worked but decorators would not render the components.

With this PR, both Vue and Vue3 will render components correctly.

I also upgraded the vue example projects to use storyStoreV7

Thanks @prashantpalikhe @tmeasday for the investigation help! <3

How to test

  • Is this testable with Jest or Chromatic screenshots?
  • Does this need a new example in the kitchen sink apps?
  • Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

@nx-cloud
Copy link

nx-cloud bot commented May 31, 2022

☁️ Nx Cloud Report

CI is running/has finished running commands for commit fc2edfa. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch


✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@yannbf yannbf changed the title Fix/vue apply decorator Vue, Vue3: provide correct presets for decorators in StoryStoreV7 May 31, 2022
@prashantpalikhe
Copy link
Contributor

Awesome @yannbf

@shilman shilman added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Jun 1, 2022
@shilman
Copy link
Member

shilman commented Jun 1, 2022

@yannbf great job! any idea what's going on with the chromatic snapshots?

@shilman shilman changed the title Vue, Vue3: provide correct presets for decorators in StoryStoreV7 Vue, Vue3: Fix decorators in StoryStoreV7 Jun 1, 2022
@yannbf
Copy link
Member Author

yannbf commented Jun 1, 2022

@yannbf great job! any idea what's going on with the chromatic snapshots?

Yup! Chromatic spotted a bug for us, however not related to this PR:

  • Styles from the App story bleed to all stories
  • In v6 that happens as all stories are pre-processed
  • In v7 (now enabled in the vue examples) as the story is loaded on demand, the Welcome story now loads without the leaked styles

That's why the snapshots are different. The new snapshot is actually the correct style that the story should have looked like in the first place!

@codecov
Copy link

codecov bot commented Jun 1, 2022

Codecov Report

Merging #18375 (fc2edfa) into next (736df3c) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             next   #18375   +/-   ##
=======================================
  Coverage   32.05%   32.05%           
=======================================
  Files         975      975           
  Lines       19211    19211           
  Branches     4031     4031           
=======================================
  Hits         6158     6158           
  Misses      12489    12489           
  Partials      564      564           
Impacted Files Coverage Δ
app/vue/src/client/preview/config.ts 0.00% <ø> (ø)
app/vue3/src/client/preview/config.ts 0.00% <ø> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 736df3c...fc2edfa. Read the comment docs.

Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

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

LGTM!

@shilman shilman added this to the 6.5 stabilization milestone Jun 1, 2022
@shilman shilman changed the title Vue, Vue3: Fix decorators in StoryStoreV7 Vue/Vue3: Fix decorators in StoryStoreV7 Jun 1, 2022
@shilman shilman merged commit 02ca9da into next Jun 1, 2022
@shilman shilman deleted the fix/vue-apply-decorator branch June 1, 2022 09:39
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label Jun 3, 2022
shilman added a commit that referenced this pull request Jun 3, 2022
Vue/Vue3: Fix decorators in StoryStoreV7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch vue vue3
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants