What is @storybook/channels?
The @storybook/channels package is used within the Storybook ecosystem to facilitate communication between different parts of the Storybook environment, such as between the Storybook UI and the preview iframe where stories are rendered. It provides an event-driven channel that can be used for bidirectional communication.
What are @storybook/channels's main functionalities?
Creating a channel
This code sample demonstrates how to create a new channel using the @storybook/channels package. The 'transport' object would be an implementation of the transport layer that the channel will use to send and receive messages.
import Channel from '@storybook/channels';
const channel = new Channel({ transport });
Sending a message
This code sample shows how to send a message with an event name and associated data through the channel. Other parts of the application can listen for 'eventName' and react accordingly.
channel.emit('eventName', eventData);
Listening for a message
This code sample illustrates how to listen for messages on the channel. The 'eventHandler' function will be called with the event data whenever a message with 'eventName' is emitted.
channel.on('eventName', eventHandler);
Removing a listener
This code sample shows how to remove a previously added event listener from the channel. This is useful for cleanup and preventing memory leaks.
channel.removeListener('eventName', eventHandler);
Other packages similar to @storybook/channels
eventemitter3
EventEmitter3 is a high-performance event emitter. While it provides similar event-driven communication capabilities, it does not include a transport layer for communication between different environments like @storybook/channels does.
mitt
Mitt is a tiny functional event emitter / pubsub. It offers similar event handling functionality but lacks the built-in transport layer for cross-environment communication that @storybook/channels provides.
8.5.0
Storybook 8.5 is packed with powerful features to enhance your development workflow. This release makes it easier than ever to build accessible, well-tested UIs. Here’s what’s new:
- 🦾 Realtime accessibility tests to help build UIs for everybody
- 🛡️ Project code coverage to measure the completeness of your tests
- 🎯 Focused tests for faster test feedback
- ⚛️ React Native Web Vite framework (experimental) for testing mobile UI⚛️
- 🎁 Storybook test early access program to level up your testing game
- 💯 Hundreds more improvements
<details>
<summary>List of all updates</summary>
- Addon A11y: Add conditional rendering for a11y violation number in Testing Module - #30073, thanks @valentinpalkovic!
- Addon A11y: Add typesVersions support for TypeScript definitions in a11y package - #30005, thanks @valentinpalkovic!
- Addon A11y: Adjust default behaviour when using with experimental-addon-test - #30162, thanks @valentinpalkovic!
- Addon A11y: Change default element selector - #30253, thanks @valentinpalkovic!
- Addon A11y: Create a11y test provider and revamp a11y addon - #29643, thanks @valentinpalkovic!
- Addon A11y: Don't set a11y tag as comment in automigrations - #30257, thanks @valentinpalkovic!
- Addon A11y: Fix skipped status handling in Testing Module - #30077, thanks @valentinpalkovic!
- Addon A11y: Refactor environment variable handling for Vitest integration - #30022, thanks @valentinpalkovic!
- Addon A11y: Remove warnings API - #30049, thanks @kasperpeulen!
- Addon A11y: Run the a11y automigration on postInstall - #30004, thanks @kasperpeulen!
- Addon A11y: Show errors of axe properly - #30050, thanks @kasperpeulen!
- Addon A11y: Update accessibility status handling in TestProviderRender - #30027, thanks @valentinpalkovic!
- Addon Docs: Dynamically import rehype - #29544, thanks @valentinpalkovic!
- Addon Docs: Make new code panel opt in - #30248, thanks @shilman!
- Addon Onboarding: Prebundle react-confetti - #29996, thanks @yannbf!
- Addon Test: Add
@vitest/coverage-v8
during postinstall if no coverage reporter is installed - #29993, thanks @ghengeveld! - Addon Test: Add prerequisite check for MSW - #30193, thanks @yannbf!
- Addon Test: Add support for previewHead - #29808, thanks @ndelangen!
- Addon Test: Add Vitest 3 support - #30181, thanks @valentinpalkovic!
- Addon Test: Always run Vitest in watch mode internally - #29749, thanks @JReinhold!
- Addon Test: Always use installed version of vitest - #30134, thanks @kasperpeulen!
- Addon Test: Clarify message when
vitest
detects missing deps - #29763, thanks @ndelangen! - Addon Test: Clear coverage data when starting or watching - #30072, thanks @ghengeveld!
- Addon Test: Context menu UI - #29727, thanks @ghengeveld!
- Addon Test: Context menu updates - #30107, thanks @ghengeveld!
- Addon Test: Correctly stop Storybook when Vitest closes - #30012, thanks @JReinhold!
- Addon Test: Filter out falsy test results in TestProviderRender - #30001, thanks @valentinpalkovic!
- Addon Test: Fix documentation links - #30128, thanks @yannbf!
- Addon Test: Fix duplicate
test.include
patterns - #30029, thanks @JReinhold! - Addon Test: Fix environment variable for Vitest Storybook integration - #30054, thanks @valentinpalkovic!
- Addon Test: Fix error reporting for
vitest
crashes - #29751, thanks @ndelangen! - Addon Test: Fix generated path to
vitest.setup.js
- #30233, thanks @JReinhold! - Addon Test: Fix indexing behavior - #29836, thanks @yannbf!
- Addon Test: Fix printing null% for coverage - #30061, thanks @ghengeveld!
- Addon Test: Fix run request while booting or restarting Vitest - #29829, thanks @ghengeveld!
- Addon Test: Handle undefined storyId - #29998, thanks @ghengeveld!
- Addon Test: Improve error message on missing coverage package - #30088, thanks @JReinhold!
- Addon Test: Improve support for mono-repos - #30216, thanks @valentinpalkovic!
- Addon Test: Make component tests status row link to the story's tests panel - #29992, thanks @ghengeveld!
- Addon Test: Merge viteFinal config into vitest config - #29806, thanks @ndelangen!
- Addon Test: Only optimize react deps if applicable in vitest-plugin - #29617, thanks @yannbf!
- Addon Test: Only reset story count on file change when watch mode is enabled - #30121, thanks @ghengeveld!
- Addon Test: Optimize internal dependencies - #29595, thanks @yannbf!
- Addon Test: Prompt switch to
experimental-nextjs-vite
- #29814, thanks @ndelangen! - Addon Test: Refactor test addon to include stories automatically - #29367, thanks @yannbf!
- Addon Test: Remove a11y placeholder - #29769, thanks @JReinhold!
- Addon Test: Replace
glob
with tinyglobby
- #29817, thanks @ghengeveld! - Addon Test: Serve
staticDirs
with Vitest - #29811, thanks @ghengeveld! - Addon Test: Show sub test provider toggle state in main testing module - #30019, thanks @ghengeveld!
- Addon Test: Support Storybook environment variables in Vitest - #29792, thanks @ghengeveld!
- Addon Test: Use correct vitest config file path - #30135, thanks @kasperpeulen!
- Addon Test: Use local storybook binary instead - #30021, thanks @kasperpeulen!
- Addon Test: Use ProgressSpinner for stop button in Testing Module - #29997, thanks @ghengeveld!
- Addon Test: Wait for 2 seconds before showing result mismatch warning - #30002, thanks @ghengeveld!
- Addon Test: Wrap sub-paths exported with
require.resolve
- #30026, thanks @ndelangen! - Addon Themes: Deprecate useThemeParameters - #30111, thanks @yannbf!
- Angular: Support statsJson in angular schemas - #29233, thanks @yannbf!
- Automigration: Improve addon-a11y-addon-test - #30127, thanks @valentinpalkovic!
- Automigration: Improve setup file transformation and version range handling for a11y migration - #30060, thanks @valentinpalkovic!
- Automigrations: Skip vite config file migration for react native web - #30190, thanks @dannyhw!
- Build: Downgrade to esbuild 0.24.0 - #30116, thanks @yannbf!
- Build: Revert Downgrade to esbuild 0.24.0 - #30120, thanks @yannbf!
- CLI: Fix init help for
storybook
command - #29480, thanks @toothlessdev! - CLI: Fix new-frameworks automigration - #29804, thanks @yannbf!
- CLI: Re-Add Nuxt support - #28607, thanks @valentinpalkovic!
- CLI: Update a11y-test comment with experimental caveat - #30258, thanks @shilman!
- Composition: Fix composed story search - #29453, thanks @jsingh0026!
- Composition: Hide contextMenu on composed storybooks - #29803, thanks @ndelangen!
- Core / Addon Test: Add config UI to Testing Module - #29708, thanks @ghengeveld!
- Core / Addon Test: Support intercepting and modifying internal test provider state updates - #29680, thanks @ghengeveld!
- Core + Addon Test: Refactor test API and fix total test count - #29656, thanks @ghengeveld!
- Core: Add bun support with npm fallback - #29267, thanks @stephenjason89!
- Core: Avoid getting stuck in locked state - #29768, thanks @ghengeveld!
- Core: Disable SidebarContextMenu in static builds - #29743, thanks @ndelangen!
- Core: Emit deprecated
TESTING_MODULE_RUN_ALL_REQUEST
for backward compatibility - #29711, thanks @ghengeveld! - Core: Evaluate main config when checking 'whats new' notifications - #29622, thanks @yannbf!
- Core: Fix
ERR_PACKAGE_PATH_NOT_EXPORTED
in @storybook/node-logger
- #30093, thanks @JReinhold! - Core: Fix
scrollIntoView
behavior and reimplement testing module time rendering - #30044, thanks @ghengeveld! - Core: Fix bundling of React - #30003, thanks @yannbf!
- Core: Float context menu button on top of story titles in sidebar - #30080, thanks @ghengeveld!
- Core: Prevent clipping box shadow on file search modal - #29523, thanks @ghengeveld!
- Core: Prevent infinite rerendering caused by comparison by reference - #30081, thanks @ghengeveld!
- Docs: Add code snippet to addons panel - #29253, thanks @larsrickert!
- Interactions: Correctly load preset when absolute paths are used - #30264, thanks @JReinhold!
- Maintenance: Move
@types/node
to devDeps
consistently - #30163, thanks @ndelangen! - Manager API: Fix infinite render-loop caused by
useSharedState
- #30259, thanks @JReinhold! - Manager: Add tags property to GroupEntry objects - #29672, thanks @Sidnioulz!
- Manager: Fix size regression - #29660, thanks @JReinhold!
- Manager: Optimize getPanels function with memoization - #30192, thanks @valentinpalkovic!
- Next.js: Fix webpack fsCache not working - #29654, thanks @sentience!
- Next.js: Support v15.1.1 - #30068, thanks @valentinpalkovic!
- Next.js: Upgrade sass-loader from ^13.2.0 to ^14.2.1 - #29264, thanks @HoncharenkoZhenya!
- Nextjs-Vite: Add TS docgen support - #29824, thanks @yannbf!
- Nextjs-Vite: Fix docgen types in main config - #30042, thanks @yannbf!
- Onboarding: Replace
react-confetti
with @neoconfetti/react
- #30098, thanks @ndelangen! - React Native Web: Add framework, CLI integration, sandboxes - #29520, thanks @shilman!
- React: Fix RSC compatibility with addon-themes and hooks - #26243, thanks @shilman!
- React: Force act running always in sequence - #30191, thanks @valentinpalkovic!
- React: Use Act wrapper in Storybook for component rendering - #30037, thanks @valentinpalkovic!
- ReactVite: Add
@storybook/test
as optional peer dependency - #29754, thanks @yannbf! - RNW-Vite: Add built-in Flow support - #29756, thanks @dannyhw!
- RNW-Vite: Add tsconfig path aliases support - #29953, thanks @shilman!
- RNW-Vite: Fix flow plugin including too many things - #29952, thanks @dannyhw!
- RNW-Vite: Fix reanimated support with babel plugin for node_modules - #30188, thanks @dannyhw!
- RNW-Vite: Integrate with experimental-addon-test - #29645, thanks @shilman!
- Storysource Addon: Fix source-loader prettier imports - #29669, thanks @slax57!
- Telemetry: Add metadata distinguishing "apps" from "design systems" - #30070, thanks @tmeasday!
- Test: Add coverage feature - #29713, thanks @ndelangen!
- TestAddon: Refactor UI & add config options - #29662, thanks @ndelangen!
- Toolbars: Suppress deprecation warning when using dynamic icons - #29545, thanks @ValeraS!
- UI: Add support for groups to
TooltipLinkList
and use it in main menu - #29507, thanks @ghengeveld! - UI: Add Yarn to About Section - #29225, thanks @grantwforsythe!
- UI: Fix controls and parameters on tag-filtered stories - #30038, thanks @shilman!
- UI: Fix overlapping shadow of testing module on scrollbar - #30132, thanks @valentinpalkovic!
- UI: Fix test provider event handling on startup - #30083, thanks @ghengeveld!
- UI: Keep failing stories in the sidebar, disregarding filters - #30086, thanks @JReinhold!
- UI: Sidebar context menu addon API - #29557, thanks @ndelangen!
- Vite: Add extra entries to
optimizeDeps
- #30117, thanks @ndelangen! - Vite: Don't prefix story import with
@fs
- #28941, thanks @tobiasdiez! - Vite: Fix preview runtime import - #29802, thanks @yannbf!
- Vite: Fix wrong import paths when configDir is not in project root - #30206, thanks @JReinhold!
- Vite: Import preview runtime as ordinary module - #29172, thanks @tobiasdiez!
- Vitest: Add plugins from
viteFinal
- #30105, thanks @JReinhold! - Vue: Extend sourceDecorator to support v-bind and nested keys in slots - #28787, thanks @JoCa96!
- Vue: Fix
vue-component-meta
docgen HMR not working - #29518, thanks @IonianPlayboy!
</details>