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

yannbf · 2024-08-16T10:56:14Z

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 · 2024-08-16T10:59:13Z

☁️ 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

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

greptile-apps

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

greptile-apps · 2024-08-16T10:57:14Z

code/frameworks/angular/src/client/portable-stories.ts

+    | NamedOrDefaultProjectAnnotations<any>
+    | NamedOrDefaultProjectAnnotations<any>[]


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

greptile-apps · 2024-08-16T10:59:13Z

code/frameworks/sveltekit/src/portable-stories.ts

+    | NamedOrDefaultProjectAnnotations<any>
+    | NamedOrDefaultProjectAnnotations<any>[]


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

greptile-apps · 2024-08-16T11:00:10Z

code/renderers/html/src/portable-stories.ts

+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/preact';


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

greptile-apps · 2024-08-16T11:01:09Z

code/renderers/preact/src/portable-stories.ts

+    | NamedOrDefaultProjectAnnotations<any>
+    | NamedOrDefaultProjectAnnotations<any>[]


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

greptile-apps · 2024-08-16T11:03:42Z

code/renderers/web-components/src/portable-stories.ts

+    | NamedOrDefaultProjectAnnotations<any>
+    | NamedOrDefaultProjectAnnotations<any>[]


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

code/frameworks/sveltekit/src/portable-stories.ts

yannbf added 6 commits August 16, 2024 12:45

Web Components: Introduce setProjectAnnotations API

0b6f53d

Angular: Introduce setProjectAnnotations API

18df216

HTML: Introduce setProjectAnnotations API

0809eb5

Preact: Introduce setProjectAnnotations API

3229c13

SvelteKit: Introduce setProjectAnnotations API

a38643e

minor change in jsdoc

1738902

yannbf added feature request angular html preact web-components sveltekit ci:normal portable stories labels Aug 16, 2024

yannbf requested a review from kasperpeulen August 16, 2024 11:03

greptile-apps bot reviewed Aug 16, 2024

View reviewed changes

kasperpeulen reviewed Aug 16, 2024

View reviewed changes

code/frameworks/sveltekit/src/portable-stories.ts Outdated Show resolved Hide resolved

yannbf added 3 commits August 16, 2024 15:49

extra changes

7ff1345

increase CI class for vitest integration

67afdd1

fix lint

8399ee1

kasperpeulen approved these changes Aug 19, 2024

View reviewed changes

yannbf merged commit 5f1dce6 into next Aug 19, 2024
56 checks passed

yannbf deleted the yann/introduce-project-annotations-to-other-packages branch August 19, 2024 11:06

github-actions bot mentioned this pull request Aug 19, 2024

Release: Prerelease 8.3.0-alpha.8 #28916

Merged

11 tasks

JReinhold assigned yannbf Aug 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

yannbf commented Aug 16, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Aug 16, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Aug 16, 2024

greptile-apps bot Aug 16, 2024

greptile-apps bot Aug 16, 2024

greptile-apps bot Aug 16, 2024

greptile-apps bot Aug 16, 2024

		\| NamedOrDefaultProjectAnnotations<any>
		\| NamedOrDefaultProjectAnnotations<any>[]

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

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

Conversation

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

What I did

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

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

☁️ Nx Cloud Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Aug 16, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 16, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 16, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 16, 2024

Choose a reason for hiding this comment

greptile-apps bot Aug 16, 2024

Choose a reason for hiding this comment

yannbf commented Aug 16, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Aug 16, 2024 •

edited

Loading