Implement preview hooks

[Hypnosphi]

This PR adds a framework-agnostic implementation of API similar to React Hooks

Here, the story render lifecycle is an analogue of React render lifecycle, while decorators and story functions are "components".
The main purpose is simplifying addon development. E.g. useEffect serves as a replacement for REGISTER_SUBSCRIPTION event.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://monorepo-git-preview-hooks.storybook.now.sh

[shilman]

Amazing @Hypnosphi

[ndelangen]

Do you think we can create hooks like: useContext, useParameter & useChannel?
I think those will be the most impactful ones.

The code needs documentation. I think this low level code is easy to forget how exactly it works. It feels to me, code comments (maybe jsdoc?) in the code would be great.
Possibly splitting all hooks into their own file/module?

[Hypnosphi]

By context, do you mean the story context? I think we can. I would prefer some name like useStoryContext to indicate that it has nothing to do with React.useContext while the other hooks do more or less the same things as their React counterparts

What should useChannel do?

[Hypnosphi]

@ndelangen I will mostly be far from computer in the following days so feel free to add whatever makes sense to you

[ndelangen]

What should useChannel do?

useChannel

import { STORY_CHANGED } from '@storybook/core-events';
export const Panel = () => {
  const emit = useChannel({
    STORY_CHANGED: (...args) => console.log(...args),
  });

  return (
    <button onClick={() => emit('my-event-type', { some: 'data' })}>
      clicking this will emit an event
    </button>
  );
}

Allows for both setting subscriptions to events and getting the emitter for emitting custom event unto the channel.

The messages can be listened for on both the iframe and the manager side.

[ndelangen]

Here's how it's implemented in the lib/api:

export const useChannel = (eventMap: EventMap) => {
  const api = useStorybookApi();
  useEffect(() => {
    Object.entries(eventMap).forEach(([type, listener]) => api.on(type, listener));
    return () => {
      Object.entries(eventMap).forEach(([type, listener]) => api.off(type, listener));
    };
  });

  return api.emit;
};

[Hypnosphi]

@shilman are there any blockers left here?

[ndelangen]

I think not, I'd love to merge this and start using it in devkits & addons!

I'm pushing for this to make it into 5.2

[ndelangen]

nice! This should shave off quite some bundlesize

[shilman]

@ndelangen @Hypnosphi StoryContext?

[shilman]

@ndelangen @Hypnosphi I'd like to see examples & documentation before we release, but aside from the comment (question) above, I'm fine to merge this.

[ndelangen]

@shilman I promise that I'll document this more during the beta.