How to use @storybook/core-events - 10 common examples

function showException(exception) {
  addons.getChannel().emit(Events.STORY_THREW_EXCEPTION, exception);
  showErrorDisplay(exception);

  // Log the stack to the console. So, user could check the source code.
  logger.error(exception.stack);
}

url,
          async: onDeviceUI,
          onError: () => {
            this._setInitialStory(initialSelection, shouldPersistSelection);
          },
        });
      }

      addons.setChannel(channel);
      this._stories.setChannel(channel);

      channel.emit(Events.CHANNEL_CREATED);
    }

    channel.on(Events.GET_STORIES, () => this._sendSetStories());
    channel.on(Events.SET_CURRENT_STORY, d => this._selectStoryEvent(d));

    this._sendSetStories();

    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const preview = this;

    addons.loadAddons(this._clientApi);

    const appliedTheme = { ...theme, ...params.theme };

    // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
    return class StorybookRoot extends PureComponent {
      render() {
        if (onDeviceUI) {
          return (

const url = `${websocketType}://${host}${port}/${query}`;
        webUrl = `${httpType}://${host}${port}`;
        channel = createChannel({
          url,
          async: onDeviceUI,
          onError: () => {
            this._setInitialStory(initialSelection, shouldPersistSelection);
          },
        });
      }

      addons.setChannel(channel);
      this._stories.setChannel(channel);

      channel.emit(Events.CHANNEL_CREATED);
    }

    channel.on(Events.GET_STORIES, () => this._sendSetStories());
    channel.on(Events.SET_CURRENT_STORY, d => this._selectStoryEvent(d));

    this._sendSetStories();

    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const preview = this;

    addons.loadAddons(this._clientApi);

    const appliedTheme = { ...theme, ...params.theme };

    // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
    return class StorybookRoot extends PureComponent {

pushToManager = debounce(() => {
    if (this._channel) {
      const stories = this.extract();

      // send to the parent frame.
      this._channel.emit(Events.SET_STORIES, { stories });
    }
  }, 0);

if (!focusInInput(event)) {
        // We have to pick off the keys of the event that we need on the other side
        const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
        channel.emit(Events.PREVIEW_KEYDOWN, {
          event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
        });
      }
    };
  }

  storyStore.on(Events.STORY_INIT, () => {
    const { storyId, viewMode } = initializePath();
    storyStore.setSelection({ storyId, viewMode });
  });

  storyStore.on(Events.STORY_RENDER, renderUI);

  if (typeof window !== 'undefined') {
    window.__STORYBOOK_CLIENT_API__ = clientApi;
    window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
  }

  let previousExports = {};
  const loadStories = req => () => {
    req.keys().forEach(filename => {
      const fileExports = req(filename);

      // An old-style story file
      if (!fileExports.componentMeta) {
        return;
      }

channel = createChannel({
          url,
          async: onDeviceUI,
          onError: () => {
            this._setInitialStory(initialSelection, shouldPersistSelection);
          },
        });
      }

      addons.setChannel(channel);
      this._stories.setChannel(channel);

      channel.emit(Events.CHANNEL_CREATED);
    }

    channel.on(Events.GET_STORIES, () => this._sendSetStories());
    channel.on(Events.SET_CURRENT_STORY, d => this._selectStoryEvent(d));

    this._sendSetStories();

    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const preview = this;

    addons.loadAddons(this._clientApi);

    const appliedTheme = { ...theme, ...params.theme };

    // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
    return class StorybookRoot extends PureComponent {
      render() {
        if (onDeviceUI) {
          return (

setPath({ storyId, viewMode });
    });

    // Handle keyboard shortcuts
    window.onkeydown = event => {
      if (!focusInInput(event)) {
        // We have to pick off the keys of the event that we need on the other side
        const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
        channel.emit(Events.PREVIEW_KEYDOWN, {
          event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
        });
      }
    };
  }

  storyStore.on(Events.STORY_INIT, () => {
    const { storyId, viewMode } = initializePath();
    storyStore.setSelection({ storyId, viewMode });
  });

  storyStore.on(Events.STORY_RENDER, renderUI);

  if (typeof window !== 'undefined') {
    window.__STORYBOOK_CLIENT_API__ = clientApi;
    window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
  }

  let previousExports = {};
  const loadStories = req => () => {
    req.keys().forEach(filename => {
      const fileExports = req(filename);

_renderMain() {
    // do initial render of story
    this._storyStore.emit(Events.STORY_INIT);
  }

window.onkeydown = event => {
      if (!focusInInput(event)) {
        // We have to pick off the keys of the event that we need on the other side
        const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
        channel.emit(Events.PREVIEW_KEYDOWN, {
          event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
        });
      }
    };
  }

selectedStory: name,
      parameters,
      forceRender,
    };

    // Render story only if selectedKind or selectedStory have changed.
    // However, we DO want the story to re-render if the store itself has changed
    // (which happens at the moment when HMR occurs)
    if (
      !forceRender &&
      revision === previousRevision &&
      viewMode === previousViewMode &&
      kind === previousKind &&
      name === previousStory
    ) {
      addons.getChannel().emit(Events.STORY_UNCHANGED, {
        id,
        revision,
        kind,
        name,
        viewMode,
      });
      return;
    }

    if (!forceRender && previousKind && previousStory) {
      addons.getChannel().emit(Events.STORY_CHANGED, id);
    }

    if (viewMode === 'docs') {
      const NoDocs = () =&gt; <div style="{{">No docs found</div>;
      const StoryDocs = (parameters &amp;&amp; parameters.docs) || NoDocs;