Add default export as function annotation from core addons #30376

yannbf · 2025-01-24T16:02:34Z

What I did

This PR introduces the concept of definePreview in preview-api, to be used by addon authors. It also uses that concept as part of the core addons. It updates the syncing logic to take into account so that core addons will be added like this in csf factories:

import addonA11y from '@storybook/addon-a11y';
import { definePreview } from '@storybook/react-vite';

export default definePreview({
  addons: [ addonA11y() ]
})

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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-storybook/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	77.9 MB	77.9 MB	0 B	1.92	0%
initSize	132 MB	132 MB	63.7 kB	-0.45	0%
diffSize	53.8 MB	53.9 MB	63.7 kB	-0.51	0.1%
buildSize	7.19 MB	7.22 MB	24 kB	24.86	0.3%
buildSbAddonsSize	1.85 MB	1.85 MB	-2.3 kB	-19.42	-0.1%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	0 B	1.11	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	-2.3 kB	-1.83	-0.1%
buildPreviewSize	3.28 MB	3.3 MB	26.3 kB	93.9	0.8%
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	18.1s	13.4s	-4s -746ms	-0.55	-35.4%
generateTime	26s	25.6s	-373ms	1.8	-1.5%
initTime	14.3s	18.7s	4.4s	3.45	🔺23.5%
buildTime	9.8s	9.2s	-550ms	-0.53	-5.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.8s	5s	161ms	-0.11	3.2%
devManagerResponsive	3.5s	3.7s	206ms	0.12	5.5%
devManagerHeaderVisible	568ms	558ms	-10ms	-1.15	-1.8%
devManagerIndexVisible	605ms	586ms	-19ms	-1.06	-3.2%
devStoryVisibleUncached	1.9s	2.1s	169ms	1.22	8%
devStoryVisible	606ms	588ms	-18ms	-1.16	-3.1%
devAutodocsVisible	514ms	511ms	-3ms	-0.3	-0.6%
devMDXVisible	533ms	511ms	-22ms	-0.39	-4.3%
buildManagerHeaderVisible	536ms	577ms	41ms	0.03	7.1%
buildManagerIndexVisible	542ms	578ms	36ms	-0.02	6.2%
buildStoryVisible	528ms	568ms	40ms	0.04	7%
buildAutodocsVisible	433ms	406ms	-27ms	-1.22	-6.7%
buildMDXVisible	397ms	463ms	66ms	-0.28	14.3%

Greptile Summary

Based on the provided information, I'll create a summary of the key changes in this PR:

Introduces definePreview function for standardizing addon configuration in Storybook, with significant changes to core addons and their integration patterns.

Added new definePreview function in code/core/src/preview-api/modules/addons/definePreview.ts for type-safe addon configuration
Modified core addons to use function-based annotations instead of direct imports in CSF factories
Updated sync-main-preview-addons.ts to handle different import patterns for core vs non-core addons
Simplified type definitions across addons by using DecoratorFunction type instead of explicit Renderer and StoryContext types
Changed essentials addon to call imported addons as functions in the composed config array

The changes improve type safety and standardize how addons are registered and configured in Storybook, particularly focusing on core addons that will now be added using function calls rather than direct imports.

nx-cloud · 2025-01-24T16:07:28Z

View your CI Pipeline Execution ↗ for commit 5b68c6a.

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	1m 47s	View ↗

☁️ Nx Cloud last updated this comment at 2025-01-28 15:20:13 UTC

greptile-apps

_{31 file(s) reviewed, 11 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-01-24T16:03:31Z

code/addons/backgrounds/src/index.ts

+
+import * as addonAnnotations from './preview';
+
+export default () => definePreview(addonAnnotations);


style: Consider adding a type annotation for the return value to ensure type safety

greptile-apps · 2025-01-24T16:04:19Z

code/addons/controls/src/index.ts

 export { PARAM_KEY } from './constants';
+
+export default () => definePreview({});


logic: empty object passed to definePreview() suggests this addon has no preview annotations, which seems incorrect for a controls addon that likely needs to register parameters or decorators

greptile-apps · 2025-01-24T16:04:20Z

code/addons/controls/src/index.ts

@@ -1 +1,5 @@
+import { definePreview } from 'storybook/internal/preview-api';


style: consider using the full path '@storybook/internal/preview-api' instead of 'storybook/internal/preview-api' for consistency with other imports in the codebase

greptile-apps · 2025-01-24T16:06:04Z

code/addons/interactions/src/preview.ts

+  // perhaps csf types need to be updated? StepRunner expects Promise<void> and not Promise<void> | void
+).step as StepRunner;


style: The type assertion may hide a real type mismatch between StepRunner and the instrumented step function. Consider fixing the underlying type definitions instead of using a type assertion.

greptile-apps · 2025-01-24T16:06:37Z

code/addons/measure/src/preview.tsx

 import { PARAM_KEY } from './constants';
 import { withMeasure } from './withMeasure';

-export const decorators: Addon_DecoratorFunction[] = [withMeasure];
+export const decorators = [withMeasure];


style: Removing the explicit Addon_DecoratorFunction type could make it harder to catch type errors if withMeasure's type signature changes in the future

greptile-apps · 2025-01-24T16:08:04Z

code/addons/viewport/src/index.ts

 export * from './defaults';
 export type * from './types';
+
+export default () => definePreview(addonAnnotations);


style: Consider adding a return type annotation to the default export function for better type safety

greptile-apps · 2025-01-24T16:08:58Z

code/core/src/common/utils/get-addon-annotations.ts

+    if (!data.isCoreAddon) {
+      data.importPath = `@storybook/${addon}/preview`;
+    }


style: Non-core addon path assumes @storybook namespace which may not always be true. Consider using the original addon string instead of hardcoding the namespace.

greptile-apps · 2025-01-24T16:09:07Z

code/core/src/common/utils/sync-main-preview-addons.test.ts

+    (getAddonAnnotations as Mock).mockImplementation(() => {
+      return {
+        importName: 'addonA11yAnnotations',
+        importPath: '@storybook/addon-a11y',
+        isCoreAddon: true,
+      };
+    });


logic: the mock implementation returns a different importPath compared to the first test case ('@storybook/addon-a11y' vs '@storybook/addon-a11y/preview'). Consider adding a test case that verifies the behavior when both paths are used in the same preview config

greptile-apps · 2025-01-24T16:10:41Z

code/addons/outline/src/withOutline.ts


 import { PARAM_KEY } from './constants';
 import { addOutlineStyles, clearStyles } from './helpers';
 import outlineCSS from './outlineCSS';

-export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
+export const withOutline: DecoratorFunction = (StoryFn, context) => {


logic: The DecoratorFunction type should be properly constrained with a Renderer type parameter to maintain type safety

greptile-apps · 2025-01-24T16:10:42Z

code/addons/outline/src/withOutline.ts


 import { PARAM_KEY } from './constants';
 import { addOutlineStyles, clearStyles } from './helpers';
 import outlineCSS from './outlineCSS';

-export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
+export const withOutline: DecoratorFunction = (StoryFn, context) => {
  const { globals } = context;
  const isActive = [true, 'true'].includes(globals[PARAM_KEY]);


style: Consider using Boolean() instead of array includes for cleaner type coercion

code/addons/essentials/src/preview.ts

storybook-pr-benchmarking · 2025-01-24T18:22:19Z

Package Benchmarks

^{Commit: 5b68c6a, ran on 28 January 2025 at 15:25:35 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/addon-a11y`

	Before	After	Difference
Dependency count	59	59	0
Self size	228 KB	234 KB	🚨 +6 KB 🚨
Dependency size	13.46 MB	13.45 MB	🎉 -11 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-backgrounds`

	Before	After	Difference
Dependency count	4	4	0
Self size	27 KB	44 KB	🚨 +17 KB 🚨
Dependency size	99 KB	99 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-docs`

	Before	After	Difference
Dependency count	17	17	0
Self size	2.20 MB	2.20 MB	🚨 +2 KB 🚨
Dependency size	7.91 MB	7.90 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-essentials`

	Before	After	Difference
Dependency count	36	36	0
Self size	15 KB	18 KB	🚨 +3 KB 🚨
Dependency size	13.87 MB	13.93 MB	🚨 +60 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-highlight`

	Before	After	Difference
Dependency count	1	1	0
Self size	9 KB	12 KB	🚨 +2 KB 🚨
Dependency size	5 KB	5 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-interactions`

	Before	After	Difference
Dependency count	56	56	0
Self size	128 KB	129 KB	🚨 +1 KB 🚨
Dependency size	12.73 MB	12.72 MB	🎉 -14 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-links`

	Before	After	Difference
Dependency count	4	4	0
Self size	19 KB	20 KB	🚨 +1 KB 🚨
Dependency size	284 KB	272 KB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/addon-measure`

	Before	After	Difference
Dependency count	2	2	0
Self size	32 KB	60 KB	🚨 +28 KB 🚨
Dependency size	20 KB	20 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-outline`

	Before	After	Difference
Dependency count	2	2	0
Self size	23 KB	41 KB	🚨 +19 KB 🚨
Dependency size	32 KB	32 KB	0 B
Bundle Size Analyzer	Link	Link

`@storybook/addon-storysource`

	Before	After	Difference
Dependency count	7	7	0
Self size	1.89 MB	1.89 MB	0 B
Dependency size	10.74 MB	10.73 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/experimental-addon-test`

	Before	After	Difference
Dependency count	60	60	0
Self size	832 KB	834 KB	🚨 +2 KB 🚨
Dependency size	14.19 MB	14.17 MB	🎉 -14 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/core`

	Before	After	Difference
Dependency count	54	54	0
Self size	19.11 MB	19.11 MB	🚨 +955 B 🚨
Dependency size	14.44 MB	14.43 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/experimental-nextjs-vite`

	Before	After	Difference
Dependency count	153	153	0
Self size	234 KB	234 KB	0 B
Dependency size	45.54 MB	45.52 MB	🎉 -14 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/nextjs`

	Before	After	Difference
Dependency count	592	592	0
Self size	474 KB	474 KB	0 B
Dependency size	84.23 MB	84.22 MB	🎉 -14 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/server-webpack5`

	Before	After	Difference
Dependency count	255	255	0
Self size	15 KB	15 KB	0 B
Dependency size	32.67 MB	32.66 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/blocks`

	Before	After	Difference
Dependency count	4	4	0
Self size	604 KB	604 KB	🚨 +18 B 🚨
Dependency size	1.53 MB	1.52 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`storybook`

	Before	After	Difference
Dependency count	55	55	0
Self size	22 KB	22 KB	0 B
Dependency size	33.55 MB	33.54 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`sb`

	Before	After	Difference
Dependency count	56	56	0
Self size	1 KB	1 KB	0 B
Dependency size	33.57 MB	33.56 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	390	390	0
Self size	530 KB	529 KB	🎉 -468 B 🎉
Dependency size	75.35 MB	75.34 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	277	277	0
Self size	612 KB	612 KB	🚨 +18 B 🚨
Dependency size	65.42 MB	65.41 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`create-storybook`

	Before	After	Difference
Dependency count	113	113	0
Self size	1.11 MB	1.11 MB	0 B
Dependency size	42.68 MB	42.67 MB	🎉 -12 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/source-loader`

	Before	After	Difference
Dependency count	5	5	0
Self size	41 KB	41 KB	🚨 +18 B 🚨
Dependency size	10.68 MB	10.67 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/test`

	Before	After	Difference
Dependency count	53	53	0
Self size	1.82 MB	1.82 MB	🚨 +18 B 🚨
Dependency size	8.09 MB	8.08 MB	🎉 -14 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/preset-server-webpack`

	Before	After	Difference
Dependency count	18	18	0
Self size	10 KB	10 KB	0 B
Dependency size	1.48 MB	1.47 MB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

`@storybook/server`

	Before	After	Difference
Dependency count	9	9	0
Self size	13 KB	13 KB	🚨 +18 B 🚨
Dependency size	974 KB	961 KB	🎉 -13 KB 🎉
Bundle Size Analyzer	Link	Link

neso123456 · 2025-01-26T01:33:47Z

Tnx broo

…nctions

…ons' into yann/addon-annotations-as-functions

yannbf added 2 commits January 24, 2025 16:58

Add default export as function annotation from core addons

e69943b

fix types

8d1c77f

yannbf self-assigned this Jan 24, 2025

yannbf added feature request ci:normal core labels Jan 24, 2025

greptile-apps bot reviewed Jan 24, 2025

View reviewed changes

kasperpeulen reviewed Jan 24, 2025

View reviewed changes

code/addons/essentials/src/preview.ts Outdated Show resolved Hide resolved

kasperpeulen approved these changes Jan 24, 2025

View reviewed changes

fix types

44e01cb

fix test

e71bade

yannbf and others added 7 commits January 27, 2025 12:40

split essentials in index/preset

3f6a53e

Introduce AnyRenderer

2c13a66

add /preview to addon-essentials

7967016

Merge branch 'kasper/csf-factories' into yann/addon-annotations-as-fu…

b068e8b

…nctions

Fix type issues

43e3c4e

Merge remote-tracking branch 'origin/yann/addon-annotations-as-functi…

cab9679

…ons' into yann/addon-annotations-as-functions

fix addon docs issue with --test flag

5b68c6a

yannbf merged commit a3d613d into kasper/csf-factories Jan 28, 2025
55 of 57 checks passed

yannbf deleted the yann/addon-annotations-as-functions branch January 28, 2025 15:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add default export as function annotation from core addons #30376

Add default export as function annotation from core addons #30376

yannbf commented Jan 24, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jan 24, 2025 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

greptile-apps bot Jan 24, 2025

storybook-pr-benchmarking bot commented Jan 24, 2025 •

edited

Loading

neso123456 commented Jan 26, 2025


		import * as addonAnnotations from './preview';

		export default () => definePreview(addonAnnotations);

		export { PARAM_KEY } from './constants';

		export default () => definePreview({});

		@@ -1 +1,5 @@
		import { definePreview } from 'storybook/internal/preview-api';

		// perhaps csf types need to be updated? StepRunner expects Promise<void> and not Promise<void> \| void
		).step as StepRunner;

Add default export as function annotation from core addons #30376

Add default export as function annotation from core addons #30376

Conversation

yannbf commented Jan 24, 2025 • 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 Jan 24, 2025 • edited Loading

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

greptile-apps bot Jan 24, 2025

Choose a reason for hiding this comment

storybook-pr-benchmarking bot commented Jan 24, 2025 • edited Loading

Package Benchmarks

@storybook/addon-a11y

@storybook/addon-backgrounds

@storybook/addon-docs

@storybook/addon-essentials

@storybook/addon-highlight

@storybook/addon-interactions

@storybook/addon-links

@storybook/addon-measure

@storybook/addon-outline

@storybook/addon-storysource

@storybook/experimental-addon-test

@storybook/core

@storybook/experimental-nextjs-vite

@storybook/nextjs

@storybook/server-webpack5

@storybook/blocks

storybook

sb

@storybook/cli

@storybook/codemod

create-storybook

@storybook/source-loader

@storybook/test

@storybook/preset-server-webpack

@storybook/server

neso123456 commented Jan 26, 2025

yannbf commented Jan 24, 2025 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Jan 24, 2025 •

edited

Loading

storybook-pr-benchmarking bot commented Jan 24, 2025 •

edited

Loading

`@storybook/addon-a11y`

`@storybook/addon-backgrounds`

`@storybook/addon-docs`

`@storybook/addon-essentials`

`@storybook/addon-highlight`

`@storybook/addon-interactions`

`@storybook/addon-links`

`@storybook/addon-measure`

`@storybook/addon-outline`

`@storybook/addon-storysource`

`@storybook/experimental-addon-test`

`@storybook/core`

`@storybook/experimental-nextjs-vite`

`@storybook/nextjs`

`@storybook/server-webpack5`

`@storybook/blocks`

`storybook`

`sb`

`@storybook/cli`

`@storybook/codemod`

`create-storybook`

`@storybook/source-loader`

`@storybook/test`

`@storybook/preset-server-webpack`

`@storybook/server`