WIP: CSF factories #30197
WIP: CSF factories #30197
Conversation
…ries' into kasper/csf-factories
…ries' into kasper/csf-factories
There was a problem hiding this comment.
20 file(s) reviewed, 19 comment(s)
Edit PR Review Bot Settings | Greptile
| const [previewFileUrl, ...previewAnnotationURLs] = [...previewAnnotations, previewOrConfigFile] | ||
| .filter(Boolean) | ||
| .map((path) => processPreviewAnnotation(path, projectRoot)); |
There was a problem hiding this comment.
logic: Destructuring could fail if previewAnnotations and previewOrConfigFile are both empty arrays after filtering. Add a check to handle this case.
| const preview = await import('${previewFileUrl}'); | ||
| const csfFactoryPreview = Object.values(preview).find(module => { | ||
| return 'isCSFFactoryPreview' in module | ||
| }); |
There was a problem hiding this comment.
logic: Object.values() and find() could return undefined. Need type checking and error handling for when no CSF factory preview is found.
| const configs = await Promise.all([${previewAnnotationURLs | ||
| .map( | ||
| (previewAnnotation, index) => | ||
| // Prefer the updated module from an HMR update, otherwise import the original module | ||
| `hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')` | ||
| ) | ||
| .join(',\n')}]) | ||
| return composeConfigs(configs); | ||
| return composeConfigs([...configs, preview]); |
There was a problem hiding this comment.
logic: preview is used in composeConfigs even when csfFactoryPreview is found, which could cause conflicts. Should only include preview in non-factory case.
| @@ -27,11 +27,12 @@ export const testStory = ( | |||
| return async (context: TestContext & TaskContext & { story: ComposedStoryFn }) => { | |||
| const composedStory = composeStory( | |||
| story, | |||
| meta, | |||
| 'isCSFFactory' in story ? (meta as any).annotations : meta, | |||
There was a problem hiding this comment.
style: Type casting to 'any' should be avoided. Consider creating proper type definitions for CSF factories to maintain type safety.
| { initialGlobals: (await getInitialGlobals?.()) ?? {} }, | ||
| undefined, | ||
| exportName | ||
| ); | ||
|
|
||
| if (composedStory === undefined || skipTags?.some((tag) => composedStory.tags.includes(tag))) { |
There was a problem hiding this comment.
logic: Optional chaining on skipTags is unnecessary since it's a required parameter
| const div = document.createElement('div'); | ||
| document.body.appendChild(div); | ||
|
|
||
| await CSF3InputFieldFilled.run({ canvasElement: div }); | ||
|
|
||
| const input = screen.getByTestId('input') as HTMLInputElement; | ||
| expect(input.value).toEqual('Hello world!'); | ||
|
|
||
| document.body.removeChild(div); |
There was a problem hiding this comment.
style: Test cleanup could fail if test errors before removeChild. Consider using try/finally
| import { Button } from './Button'; | ||
|
|
||
| // eslint-disable-next-line storybook/default-exports | ||
| const config = defineConfig({ args: { children: 'TODO: THIS IS NOT WORKING YET' } }); |
There was a problem hiding this comment.
logic: TODO comment indicates unfinished/broken functionality. This should be resolved before merging.
| }); | ||
|
|
||
| export const CSF2StoryWithParamsAndDecorator = meta.story({ | ||
| render: (args: any) => { |
There was a problem hiding this comment.
style: Using any type here loses type safety. Consider using proper Button component prop types.
code/renderers/react/src/preview.tsx
Outdated
| readonly meta = <TComponent extends ComponentType<any>, TMetaArgs extends Args>( | ||
| meta: ComponentAnnotations<TRenderer, any> & { component: TComponent; args: TMetaArgs } | ||
| ) => { |
There was a problem hiding this comment.
logic: The meta method accepts any for TRenderer annotations but then casts to TMetaArgs. This could lead to type safety issues. Consider constraining the any type.
code/renderers/react/src/preview.tsx
Outdated
| public meta: Meta<TRenderer, TArgs>, | ||
| public config: PreviewConfig<TRenderer> | ||
| ) { | ||
| Object.assign(this, annotations); |
There was a problem hiding this comment.
style: Using Object.assign to copy all properties from annotations could lead to property collisions with the class's own methods/properties. Consider explicit property copying instead.
|
View your CI Pipeline Execution ↗ for commit 861625a.
☁️ Nx Cloud last updated this comment at |
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 59 | 59 | 0 |
| Self size | 410 KB | 228 KB | 🎉 -183 KB 🎉 |
| Dependency size | 13.46 MB | 13.46 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/addon-mdx-gfm
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 69 | 69 | 0 |
| Self size | 4 KB | 3 KB | 🎉 -1 KB 🎉 |
| Dependency size | 2.41 MB | 2.41 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/core
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 53 | 53 | 0 |
| Self size | 19.08 MB | 19.09 MB | 🚨 +13 KB 🚨 |
| Dependency size | 14.43 MB | 14.43 MB | 0 B |
| Bundle Size Analyzer | Link | Link |
@storybook/experimental-nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 153 | 153 | 0 |
| Self size | 232 KB | 232 KB | 0 B |
| Dependency size | 44.72 MB | 45.15 MB | 🚨 +424 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 592 | 592 | 0 |
| Self size | 472 KB | 472 KB | 0 B |
| Dependency size | 83.39 MB | 83.81 MB | 🚨 +424 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 114 | 114 | 0 |
| Self size | 43 KB | 43 KB | 0 B |
| Dependency size | 18.25 MB | 18.67 MB | 🚨 +424 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 87 | 87 | 0 |
| Self size | 13 KB | 13 KB | 0 B |
| Dependency size | 16.05 MB | 16.48 MB | 🚨 +424 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 323 | 323 | 0 |
| Self size | 6 KB | 6 KB | 0 B |
| Dependency size | 42.43 MB | 42.86 MB | 🚨 +424 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 54 | 54 | 0 |
| Self size | 22 KB | 22 KB | 0 B |
| Dependency size | 33.51 MB | 33.52 MB | 🚨 +13 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
sb
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 55 | 55 | 0 |
| Self size | 1 KB | 1 KB | 0 B |
| Dependency size | 33.53 MB | 33.55 MB | 🚨 +13 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 397 | 397 | 0 |
| Self size | 496 KB | 496 KB | 🚨 +128 B 🚨 |
| Dependency size | 75.51 MB | 75.53 MB | 🚨 +17 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 276 | 276 | 0 |
| Self size | 612 KB | 616 KB | 🚨 +4 KB 🚨 |
| Dependency size | 65.36 MB | 65.37 MB | 🚨 +13 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 112 | 112 | 0 |
| Self size | 1.11 MB | 1.11 MB | 0 B |
| Dependency size | 42.64 MB | 42.66 MB | 🚨 +13 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/preset-react-webpack
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 191 | 191 | 0 |
| Self size | 24 KB | 24 KB | 0 B |
| Dependency size | 33.52 MB | 33.94 MB | 🚨 +423 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 6 | 6 | 0 |
| Self size | 932 KB | 1.36 MB | 🚨 +423 KB 🚨 |
| Dependency size | 24 KB | 24 KB | 0 B |
| Bundle Size Analyzer | Link | Link |
Closes #30166
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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 pull request has been released as version
0.0.0-pr-30197-sha-861625a8. Try it out in a new sandbox by runningnpx storybook@0.0.0-pr-30197-sha-861625a8 sandboxor in an existing project withnpx storybook@0.0.0-pr-30197-sha-861625a8 upgrade.More information
0.0.0-pr-30197-sha-861625a8kasper/csf-factories861625a81736785284)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=30197Greptile Summary
Based on the provided files and changes, here's a concise summary of the CSF factories pull request:
Introduces CSF (Component Story Format) factories to provide a more structured and type-safe way to define Storybook configurations and stories.
defineConfigandmeta.story()pattern for type-safe story definitions in/code/renderers/react/src/preview.tsxprocessCSFFileto detect and handle CSF4 factory format viaisCSFFactoryPreviewflagThe changes provide better type safety and structure while maintaining backward compatibility with existing CSF formats. The implementation appears solid but requires careful testing around project annotation overrides and factory pattern adoption.