Listen to Storybook events in preview.ts in Storybook 8

[dmy-leanix]

Summary

In Storybook 7 I could do in preview.ts the following:

import { addons } from '@storybook/addons';
import { GLOBALS_UPDATED } from '@storybook/core-events';

addons.getChannel().addEventListener(GLOBALS_UPDATED, () => {});

But addons package is deprecated

Tried this:

import { addons } from '@storybook/manager-api';
// ...

But it doesn't reach to callback for event listener...

How to do it in Storybook 8?

Additional information

No response

Create a reproduction

No response

[doubleedesign]

I just had a very similar problem when debugging something in the a11y addon. I was trying to use channel.on() to detect events, but it was only picking up events I emitted myself. I had tried importing both via @storybook/addons and @storybook/manager-api, neither worked.

When digging into the a11y addon's code to see how it was accessing and using the channel, I found it was importing addons from storybook/internal/preview-api. I updated my code to import addons like so:

import { addons } from '@storybook/preview-api';

and now everything works how I expected it to! For example:

channel.on('storybook/a11y/result', (data) => {
    console.log('A11y result', data);
})

As per your example, I also tested core events, and they also work. For example:

import { addons } from '@storybook/preview-api';
import { STORY_RENDERED } from '@storybook/core-events';

const channel = addons.getChannel();

channel.on(STORY_RENDERED, () => {
   console.log('Story rendered');
});

[dmy-leanix]

Thanks for answer! Currently I did different way - created decorator and inside used useChannel

[lentilz]

channel.on() doesnt appear to capture all addon events. I was expecting to see events for when the addon tab is selected to bind additional behavior based on the tab in use.