GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-02 05:03:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add a README to lib/core to explain the basics

Browse Source
This commit is contained in:
Tom Coleman 2020-03-02 11:21:27 +11:00
parent 811684a993
commit 574570554a
1 changed files with 23 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
lib/core/README.md
View File

@ -3,3 +3,26 @@
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 for `storiesOf()` API calls; re-exported by each framework.
- `ConfigApi` (from `@storybook/client-api`) - provides the configure API (wrapped by `makeConfigure` below).
- `StoryRenderer` - controls the HTML that is rendered in the preview (calling the `render` function with the current story at appropriate times).
- `url.js` - controls the URL in the preview and sets the selection based on it.
- `makeConfigure` - loads CSF files from `require.context()` calls and uses `ClientApi` to 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 `makeConfigure`'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.