Core: Add support for `beforeAll` hook #28255

ghengeveld · 2024-06-17T11:54:23Z

Closes #28268
Depends on ComponentDriven/csf#96 ✅

What I did

This adds the concept of a beforeAll function, which runs when the Storybook preview is initialized or preview annotations are updated. In general, beforeAll runs once, before any loaders, decorators or stories. The API is similar to Vitest's beforeAll (except that timeout is not supported):

type Awaitable<T> = T | Promise<T>;
type CleanupFn = () => Awaitable<void>;
type BeforeAll = () => Awaitable<void | CleanupFn>;

beforeAll may be synchronous or asynchronous, and may return a cleanup function which may also be synchronous or asynchronous.

beforeAll may be specified as an export in preview.js (by addons or in user's Storybook config) or in a file referenced by previewAnnotations in main.js.

// .storybook/preview.js

export const beforeAll = () => {
  // ... do something

  return () => {
    // ... cleanup
  }
}

When multiple beforeAll hooks are specified, they will be executed sequentially (and awaited) in the following order:

Addon hooks (in order of addons array in .storybook/main.js)
Annotation hooks (in order of previewAnnotations array in .storybook/main.js)
Preview hook (via .storybook/preview.js)

The cleanup function acts like an "afterAll", but is not guaranteed to run because this code typically runs in the browser. However, the Storybook test runner may invoke this function to clean up between test runs. Also, when modifying preview.js or a previewAnnotations file, cleanup will run before reinitializing beforeAll. Cleanup functions are executed sequentially, in reverse order of initialization:

Preview cleanup
Annotation cleanup (in reverse order)
Addon cleanup (in reverse order)

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

Create a sandbox
Create .storybook/before-all.js with the example beforeAll hook below.
Update .storybook/preview.js to add beforeAll (see below)
Update .storybook/main.js to add previewAnnotations (see below)
Run the sandbox and check your browser console
Verify you see both hooks run (before-all.js goes first)
Modify and save preview.js, then check your browser console again
Verify you see the cleanup happen in reverse order before the updated hooks run in their usual order.

Example beforeAll hook:

// .storybook/preview.js or .storybook/before-all.js
export const beforeAll = () => {
  console.log('### beforeAll in preview/annotation');
  return () => {
    console.log('### afterAll in preview/annotation');
  };
};

Update the log lines so you can distinguish between files (preview.js, before-all.js).

// .storybook/main.js
const config = {
  // ... other stuff

  previewAnnotations: ['.storybook/before-all.js']
};
export default config;

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 pull request has been released as version 0.0.0-pr-28255-sha-9d564a0d. Try it out in a new sandbox by running npx storybook@0.0.0-pr-28255-sha-9d564a0d sandbox or in an existing project with npx storybook@0.0.0-pr-28255-sha-9d564a0d upgrade.

More information


Published version	`0.0.0-pr-28255-sha-9d564a0d`
Triggered by	@ghengeveld
Repository	storybookjs/storybook
Branch	`beforeAll-hook`
Commit	`9d564a0d`
Datetime	Mon Jun 24 13:56:48 UTC 2024 (`1719237408`)
Workflow run	9646676768

To request a new release of this pull request, mention the @storybookjs/core team.

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=28255

nx-cloud · 2024-06-17T12:06:45Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit df3ab6f. 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.

…ew, in that order

code/lib/preview-api/src/modules/store/csf/beforeAll.ts

code/lib/preview-api/src/modules/store/csf/portable-stories.ts

code/lib/types/src/modules/story.ts

scripts/tasks/e2e-tests-build.ts

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

kasperpeulen

Looks good!

code/lib/preview-api/src/modules/preview-web/Preview.tsx

greptile-apps

PR Summary

Added beforeAll hook support in /code/core/src/preview-api/modules/preview-web/Preview.tsx
Introduced composeBeforeAllHooks in /code/core/src/preview-api/modules/store/csf/beforeAll.ts
Added unit tests for beforeAll in /code/core/src/preview-api/modules/store/csf/beforeAll.test.ts
Updated composeConfigs and portable-stories to integrate beforeAll hooks
Added end-to-end tests for beforeAll in /code/e2e-tests/storybook-hooks.spec.ts

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

code/e2e-tests/storybook-hooks.spec.ts

…js/yarn.lock

…t/yarn.lock

greptile-apps

PR Summary

(updates since last review)

Added beforeAll hook support in /code/core/src/preview-api/modules/preview-web/Preview.tsx
Introduced composeBeforeAllHooks in /code/core/src/preview-api/modules/store/csf/beforeAll.ts
Added unit tests for beforeAll in /code/core/src/preview-api/modules/store/csf/beforeAll.test.ts
Updated composeConfigs and portable-stories to integrate beforeAll hooks
Added end-to-end tests for beforeAll in /code/e2e-tests/storybook-hooks.spec.ts

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

…te/yarn.lock

…/yarn.lock

greptile-apps

PR Summary

(updates since last review)

Added beforeAll hook support in /code/core/src/preview-api/modules/preview-web/Preview.tsx
Introduced composeBeforeAllHooks in /code/core/src/preview-api/modules/store/csf/beforeAll.ts
Added unit tests for beforeAll in /code/core/src/preview-api/modules/store/csf/beforeAll.test.ts
Updated composeConfigs and portable-stories to integrate beforeAll hooks
Added end-to-end tests for beforeAll in /code/e2e-tests/storybook-hooks.spec.ts

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

Added beforeAll hook support in /code/core/src/preview-api/modules/preview-web/Preview.tsx
Introduced composeBeforeAllHooks in /code/core/src/preview-api/modules/store/csf/beforeAll.ts
Added unit tests for beforeAll in /code/core/src/preview-api/modules/store/csf/beforeAll.test.ts
Updated composeConfigs and portable-stories to integrate beforeAll hooks
Added end-to-end tests for beforeAll in /code/e2e-tests/storybook-hooks.spec.ts

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

Removed constructor enabling production mode based on NODE_ENV in /code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts
Potential impact on Angular application bootstrapping in different environments
Watch for changes in performance and debugging capabilities

_{1 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

Added Canvas type to StoryContext in /code/core/src/preview-api/modules/store/StoryStore.ts
Updated mount function call to pass props in /code/renderers/svelte/src/public-types.test.ts
Updated mount function call to include props object in /code/renderers/vue3/src/public-types.test.ts

No major changes found since last review.

_{3 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

Modified CI environment check in /code/core/src/core-server/withTelemetry.ts
Added 'format' parameter support in /code/frameworks/angular/src/client/docs/sourceDecorator.ts
Updated ErrorStory for consistent stack traces in /code/lib/blocks/src/examples/Button.stories.tsx

_{3 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

Updated key generation logic in /code/addons/interactions/src/components/MethodCall.tsx for unique keys in ArrayNode
Enhanced Webpack configuration in /code/frameworks/angular/src/server/plugins/storybook-normalize-angular-entry-plugin.js to prevent multiple runtime bundle issues
Updated import paths in /code/lib/blocks/src/blocks/Source.tsx for improved module structure and maintainability

_{3 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

Added end-to-end tests for beforeAll hook in code/e2e-tests/storybook-hooks.spec.ts
Tests ensure correct beforeAll execution on load and HMR
Verified sequence of beforeAll and cleanup calls

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

code/e2e-tests/storybook-hooks.spec.ts

Add support for beforeAll hook to projectAnnotations

1f6c183

ghengeveld force-pushed the beforeAll-hook branch from 3e86b57 to 1f6c183 Compare June 17, 2024 13:43

yannbf added 2 commits June 18, 2024 13:40

add beforeAllHook to portable stories

ee0653d

add E2E tests for beforeAll hook and HMR

012c28f

yannbf added feature request ci:merged Run the CI jobs that normally run when merged. portable stories test labels Jun 18, 2024

yannbf assigned ghengeveld Jun 18, 2024

ghengeveld added 2 commits June 19, 2024 10:15

Compose beforeAll functions from addons, previewAnnotations and previ…

76ee180

…ew, in that order

Check for call order when multiple beforeAll hooks are specified

1135daf

ghengeveld marked this pull request as ready for review June 19, 2024 11:59

ghengeveld requested review from yannbf, kasperpeulen and valentinpalkovic June 19, 2024 11:59

ghengeveld changed the title ~~Core: Add support for beforeAll hook to projectAnnotations~~ Core: Add support for beforeAll hook Jun 19, 2024

ghengeveld requested a review from kylegach June 19, 2024 12:06