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

prashantpalikhe commented May 31, 2022

Awesome @yannbf

@yannbf yannbf force-pushed the fix/vue-apply-decorator branch from 7d2a0c1 to 6d411ab Compare May 31, 2022
@yannbf yannbf force-pushed the fix/vue-apply-decorator branch from 6d411ab to 6845817 Compare May 31, 2022
@shilman shilman added the patch Bugfix & documentation PR that need to be picked to master 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.

shilman
shilman approved these changes Jun 1, 2022
Copy link
Member

@shilman shilman left a comment

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
43 of 48 checks passed
@shilman shilman deleted the fix/vue-apply-decorator branch Jun 1, 2022
@shilman shilman added the picked Patch/release PRs cherry-picked to master/release branch label Jun 3, 2022
shilman added a commit that referenced this issue 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
app: vue app: vue3 bug patch Bugfix & documentation PR that need to be picked to master branch picked Patch/release PRs cherry-picked to master/release branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants