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.

Sign up for GitHub

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

Jump to bottom

Core: Introduce setProjectAnnotations API to more renderers and frameworks #28907

Merged
merged 9 commits into from
Aug 19, 2024
Merged

Core: Introduce setProjectAnnotations API to more renderers and frameworks #28907

merged 9 commits into from
Aug 19, 2024

Conversation

yannbf
Copy link
Member

@yannbf yannbf commented Aug 16, 2024 •
edited by storybook-pr-benchmarking bot
Loading

Closes #28895

What I did

This PR introduces the setProjectAnnotations API to the following packages:

  • @storybook/preact
  • @storybook/html
  • @storybook/web-components
  • @storybook/angular
  • @storybook/sveltekit

This introduces the first step to supporting the vitest integration (portable stories based) to these renderers. In the future, these packages would also provide the other APIs such as composeStory and composeStories in case it makes sense to support testingLibraryRender or a portable stories in docs use case.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

Proper testing will come in upcoming PRs that sets sandbox tests for each package.

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name before after diff z %
createSize 0 B 0 B 0 B - -
generateSize 76.3 MB 76.3 MB 0 B -2 0%
initSize 169 MB 169 MB -86.1 kB 0.44 -0.1%
diffSize 92.8 MB 92.7 MB -86.1 kB 0.52 -0.1%
buildSize 7.46 MB 7.46 MB -2.08 kB 0.51 0%
buildSbAddonsSize 1.62 MB 1.61 MB -1.24 kB -0.41 -0.1%
buildSbCommonSize 195 kB 195 kB 0 B - 0%
buildSbManagerSize 2.3 MB 2.3 MB 0 B 0.49 0%
buildSbPreviewSize 351 kB 351 kB -823 B -0.36 -0.2%
buildStaticSize 0 B 0 B 0 B - -
buildPrebuildSize 4.46 MB 4.46 MB -2.06 kB 0.43 0%
buildPreviewSize 3 MB 3 MB -20 B 0.55 0%
testBuildSize 0 B 0 B 0 B - -
testBuildSbAddonsSize 0 B 0 B 0 B - -
testBuildSbCommonSize 0 B 0 B 0 B - -
testBuildSbManagerSize 0 B 0 B 0 B - -
testBuildSbPreviewSize 0 B 0 B 0 B - -
testBuildStaticSize 0 B 0 B 0 B - -
testBuildPrebuildSize 0 B 0 B 0 B - -
testBuildPreviewSize 0 B 0 B 0 B - -
name before after diff z %
createTime 7.6s 7.3s -251ms -1.44 -3.4%
generateTime 19.8s 21.5s 1.7s 0.65 8%
initTime 16.5s 20s 3.5s 0.86 17.6%
buildTime 11.5s 13.7s 2.1s 1.25 🔺15.5%
testBuildTime 0ms 0ms 0ms - -
devPreviewResponsive 8.8s 7.3s -1s -501ms -0.18 -20.4%
devManagerResponsive 5.9s 4.8s -1s -26ms 0.12 -21%
devManagerHeaderVisible 1.2s 750ms -482ms -0.58 -64.3%
devManagerIndexVisible 1.2s 758ms -511ms -0.86 -67.4%
devStoryVisibleUncached 2s 1.2s -714ms -0.23 -55%
devStoryVisible 1.2s 789ms -481ms -0.61 -61%
devAutodocsVisible 999ms 733ms -266ms -0.04 -36.3%
devMDXVisible 1.2s 805ms -486ms 0.41 -60.4%
buildManagerHeaderVisible 931ms 716ms -215ms -0.32 -30%
buildManagerIndexVisible 933ms 725ms -208ms -0.28 -28.7%
buildStoryVisible 1s 796ms -241ms -0.1 -30.3%
buildAutodocsVisible 892ms 637ms -255ms -0.79 -40%
buildMDXVisible 694ms 692ms -2ms 0.4 -0.3%

Greptile Summary

This PR introduces the setProjectAnnotations API to multiple Storybook renderers and frameworks, laying the groundwork for vitest integration and portable stories support.

  • Added setProjectAnnotations function in new portable-stories.ts files for Angular, SvelteKit, HTML, Preact, and Web Components renderers
  • Updated existing portable-stories files for React, Vue3, and Svelte renderers to include the new API
  • Introduced composeStory and composeStories functions for Next.js, React, Vue3, and Svelte renderers
  • Modified index files to export the new portable-stories modules for affected renderers and frameworks

@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Aug 16, 2024 •
edited
Loading

☁️ Nx Cloud Report

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

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

greptile-apps[bot]
greptile-apps bot reviewed Aug 16, 2024
View reviewed changes
Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

15 file(s) reviewed, 5 comment(s)
Edit PR Review Bot Settings

code/frameworks/angular/src/client/portable-stories.ts
Comment on lines +35 to +36
| NamedOrDefaultProjectAnnotations<any>
| NamedOrDefaultProjectAnnotations<any>[]
Copy link
Contributor

Choose a reason for hiding this comment

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

style: Consider using a more specific type than any for better type safety

code/frameworks/sveltekit/src/portable-stories.ts
Comment on lines +39 to +40
| NamedOrDefaultProjectAnnotations<any>
| NamedOrDefaultProjectAnnotations<any>[]
Copy link
Contributor

Choose a reason for hiding this comment

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

style: Consider using a more specific type than any for better type safety

code/renderers/html/src/portable-stories.ts
*
* ```jsx
* // setup-file.js
* import { setProjectAnnotations } from '@storybook/preact';
Copy link
Contributor

Choose a reason for hiding this comment

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

syntax: Update import statement to use '@storybook/html' instead of '@storybook/preact'

code/renderers/preact/src/portable-stories.ts
Comment on lines +34 to +35
| NamedOrDefaultProjectAnnotations<any>
| NamedOrDefaultProjectAnnotations<any>[]
Copy link
Contributor

Choose a reason for hiding this comment

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

style: Consider using a more specific type than any for better type safety

code/renderers/web-components/src/portable-stories.ts
Comment on lines +34 to +35
| NamedOrDefaultProjectAnnotations<any>
| NamedOrDefaultProjectAnnotations<any>[]
Copy link
Contributor

Choose a reason for hiding this comment

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

style: Consider using a more specific type than any for better type safety

@yannbf yannbf merged commit 5f1dce6 into next Aug 19, 2024
56 checks passed
@yannbf yannbf deleted the yann/introduce-project-annotations-to-other-packages branch August 19, 2024 11:06
@github-actions github-actions bot mentioned this pull request Aug 19, 2024
Merged
11 tasks
This was referenced Oct 3, 2024
Open
Open
Open
Open
This was referenced Oct 5, 2024
Open
Open
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

@kasperpeulen kasperpeulen kasperpeulen approved these changes

Assignees

@yannbf yannbf

Labels
angular ci:normal feature request html portable stories preact sveltekit web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Introduce setProjectAnnotations for every Storybook renderer
2 participants
@yannbf @kasperpeulen