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	6.06 kB	1.55	0%
initSize	132 MB	132 MB	118 kB	-0.6	0.1%
diffSize	53.8 MB	53.9 MB	112 kB	-0.63	0.2%
buildSize	7.19 MB	7.19 MB	335 B	1.6	0%
buildSbAddonsSize	1.85 MB	1.85 MB	150 B	-0.65	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	0 B	1.36	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	150 B	1.47	0%
buildPreviewSize	3.28 MB	3.28 MB	185 B	1.91	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	24.2s	13.5s	-10s -687ms	-0.59	-78.8%
generateTime	18.3s	22.6s	4.3s	0.61	19.2%
initTime	12.7s	15s	2.2s	0.44	15.1%
buildTime	10.4s	8.4s	-1s -916ms	-1.3	🔰-22.6%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.8s	4.6s	-255ms	-1.15	-5.5%
devManagerResponsive	3.2s	3.4s	200ms	-0.67	5.7%
devManagerHeaderVisible	645ms	696ms	51ms	1.31	🔺7.3%
devManagerIndexVisible	672ms	706ms	34ms	0.89	4.8%
devStoryVisibleUncached	1.9s	1.9s	68ms	0.26	3.4%
devStoryVisible	674ms	730ms	56ms	1.29	🔺7.7%
devAutodocsVisible	539ms	604ms	65ms	1.26	🔺10.8%
devMDXVisible	508ms	637ms	129ms	1.56	🔺20.3%
buildManagerHeaderVisible	521ms	653ms	132ms	1.09	20.2%
buildManagerIndexVisible	523ms	655ms	132ms	1.03	20.2%
buildStoryVisible	514ms	638ms	124ms	1.03	19.4%
buildAutodocsVisible	433ms	554ms	121ms	1.76	🔺21.8%
buildMDXVisible	481ms	712ms	231ms	3.62	🔺32.4%

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 e71bade.

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

☁️ Nx Cloud last updated this comment at 2025-01-25 08:00: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

kasperpeulen · 2025-01-24T16:15:49Z

code/addons/essentials/src/preview.ts

-export default composeConfigs([actions, docs, backgrounds, viewport, measure, outline, highlight]);
+export default composeConfigs([
+  actionsAddon(),
+  docsAddon(),
+  backgroundsAddon(),
+  viewportAddon(),
+  measureAddon(),
+  outlineAddon(),
+  highlightAddon(),
+]);


I think this file can be moved into index.ts, as it didn't exist before.

The index.ts file is actually a node preset file:
https://github.com/storybookjs/storybook/blob/next/code/addons/essentials/src/index.ts

Not sure what to do here!

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

Package Benchmarks

^{Commit: e71bade, ran on 24 January 2025 at 18:37:45 UTC}

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

`@storybook/addon-backgrounds`

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

`@storybook/addon-essentials`

	Before	After	Difference
Dependency count	36	36	0
Self size	15 KB	15 KB	0 B
Dependency size	13.87 MB	13.97 MB	🚨 +101 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/addon-highlight`

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

`@storybook/addon-measure`

	Before	After	Difference
Dependency count	2	2	0
Self size	32 KB	68 KB	🚨 +36 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	50 KB	🚨 +27 KB 🚨
Dependency size	32 KB	32 KB	0 B
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.21 MB	84.23 MB	🚨 +17 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/react-webpack5`

	Before	After	Difference
Dependency count	323	323	0
Self size	8 KB	8 KB	0 B
Dependency size	43.26 MB	43.27 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/vue3-webpack5`

	Before	After	Difference
Dependency count	495	495	0
Self size	7 KB	7 KB	0 B
Dependency size	55.65 MB	55.67 MB	🚨 +17 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/cli`

	Before	After	Difference
Dependency count	401	401	0
Self size	529 KB	529 KB	0 B
Dependency size	75.61 MB	75.62 MB	🚨 +18 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

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

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

Tnx broo

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

kasperpeulen approved these changes Jan 24, 2025

View reviewed changes

fix types

44e01cb

fix test

e71bade

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

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

kasperpeulen Jan 24, 2025

yannbf 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

Are you sure you want to change the base?

Add default export as function annotation from core addons #30376

Conversation

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

kasperpeulen Jan 24, 2025

Choose a reason for hiding this comment

yannbf Jan 24, 2025

Choose a reason for hiding this comment

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

Package Benchmarks

@storybook/addon-backgrounds

@storybook/addon-essentials

@storybook/addon-highlight

@storybook/addon-measure

@storybook/addon-outline

@storybook/nextjs

@storybook/react-webpack5

@storybook/vue3-webpack5

@storybook/cli

@storybook/codemod

neso123456 commented Jan 26, 2025

yannbf commented Jan 24, 2025 •

edited

Loading

nx-cloud bot commented Jan 24, 2025 •

edited

Loading

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

edited

Loading

`@storybook/addon-backgrounds`

`@storybook/addon-essentials`

`@storybook/addon-highlight`

`@storybook/addon-measure`

`@storybook/addon-outline`

`@storybook/nextjs`

`@storybook/react-webpack5`

`@storybook/vue3-webpack5`

`@storybook/cli`

`@storybook/codemod`