d7687ade18
`@storybook/semver` is a browser friendly fork of `semver`.
We use it to avoid issue with IE11 as classic "compiled" `semver` is now compatible with it.
If we just recompile `semver` from `node_modules` it ends with a package that `require('core-js')` but `core-js` is not listed in the dependency. And so Yarn 2 throw an error.
So to avoid that we need to use a "proper" dependency which is `semver` recompile and with all needed dependencies in its package.json.
Storybook Core
This package contains common data structures and bootstrapping capabilities used among the different frameworks (React, RN, Vue, Ember, Angular, etc).
Preview
The files in src/client/preview alongside the @storybook/client-api package form the "API" of the preview (iframe) side of Storybook. Here is a brief overview of the architecture:
Each framework (e.g. @storybook/react / @storybook/angular / et al.) initializes the preview by calling into src/client/preview/start.ts, passing a render function that will be used to render stories.
The start module initiaizes all the submodules:
StoryStore(from@storybook/client-api) - stores the stories and their state as well as the current selection or error.ClientApi(from@storybook/client-api) - provides the entry point forstoriesOf()API calls; re-exported by each framework.ConfigApi(from@storybook/client-api) - provides the configure API (wrapped byloadCsfbelow).StoryRenderer- controls the HTML that is rendered in the preview (calling therenderfunction with the current story at appropriate times).url.js- controls the URL in the preview and sets the selection based on it.loadCsf- loads CSF files fromrequire.context()calls and usesClientApito load them into the store.
Each module uses the channel to communicate with each other and the manager. Each module also has direct access to the story store.
Events on startup
The store can only be changed during "configuration". The ConfigApi will call store.startConfiguration(), then the user code (or loadCsf's loader) which will use client API to load up stories. At the end of the user's code the ConfigApi will call store.finishConfiguration(). At this point the SET_STORIES event is emitted and the stories are transmitted to the manager.
The SET_CURRENT_STORY "command" event can be used to set the selection on the store. However only once this has been recieved and configuration is over will the store use the RENDER_CURRENT_STORY to tell the StoryRenderer to render it.