Reading Storybook
nus3ディレクトリ構造
.
├── code // Storybookの本体周り
│ ├── __mocks__
│ ├── addons
│ ├── e2e-tests
│ ├── frameworks
│ ├── lib
│ ├── node_modules
│ ├── presets
│ ├── renderers
│ └── ui
├── docs
│ ├── addons
│ ├── api
│ ├── assets
│ ├── builders
│ ├── configure
│ ├── contribute
│ ├── essentials
│ ├── get-started
│ ├── sharing
│ ├── snippets
│ ├── versions
│ ├── writing-docs
│ ├── writing-stories
│ └── writing-tests
├── node_modules
├── sandbox rootで`yarn start`すると生成される環境
│ └── react-vite-default-ts
├── scripts rootで`yarn start`した際に実行されるファイルが
│ ├── node_modules
│ ├── prepare
│ ├── sandbox
│ ├── tasks
│ └── utils
└── test-storybooks
├── ember-cli
├── external-docs
├── server-kitchen-sink
└── standalone-preview
storybook devが実行されて、Manager app 部分がレンダリングされるまでの流れ
3 行まとめ
-
yarn startで sandbox 環境が構築され、すぐに動作確認ができる -
storybook devでは Express が起動し、ejs から HTML がレンダリングされる - Manager app 部分は
@storybook/managerパッケージが該当しており、React で実装されている
処理の流れ
-
storybookパッケージの index.js が実行され、@storybook/cli/bin/indexが require される -
@storybook/cliパッケージのbin/index.jsが実行され、'../dist/generate.js'が require される - require された
code/lib/cli/src/generate.ts(ビルド前)で、commanderを使ってstorybook devコマンドが定義される -
storybook devコマンドでは、code/lib/cli/src/dev.tsのdev関数が実行される -
dev関数では、@storybook/core-serverパッケージのbuildDevStandaloneが実行される -
buildDevStandaloneではcode/lib/core-server/src/dev-server.tsで定義されたstorybookDevServerが実行される -
storybookDevServerでは Express を使ってサーバーが起動 -
@storybook/builder-managerパッケージが提供するビルダーを使ってベースとなる HTML をレンダリング - Manager app と呼ばれる部分は
@storybook/managerパッケージで React でレンダリングされる
nus3今回登場する code 配下のディレクトリ
.
├── frameworks
│ └── react-vite
├── lib
│ ├── builder-manager // 8. @storybook/builder-manager
│ ├── builder-vite
│ ├── cli // 2~5. @storybook/cli
│ ├── cli-storybook // 1. storybook
│ └── core-server // 6~7. @storybook/core-server
└── ui
└── manager // 9. @storybook/manager
1. storybookパッケージ
@storybook/cliの wrapper パッケージで@storybook/cliを require してるのみ。
nus3
2~5. @storybook/cli
@storybook/cli/bin/index.jsではgenerate.jsを require している
generate.jsのビルド前のコードはcode/lib/cli/src/generate.tsであり、ここではstorybook devを含むコマンドの処理が実装されている。
storybook devコマンドではdev関数が実行され、@storybook/core-serverのbuildDevStandaloneが呼び出される
nus3
6~7. @storybook/core-server
@storybook/core-serverのbuildDevStandaloneでは dev サーバーの起動にstorybookDevServerが実行されている
storybookDevServerでは Express を使ってサーバーが起動
Manager app 部分はmanagerBuilder.start()でレンダリングされている
managerBuilderの実態は'@storybook/builder-manager'を import したもの
nus3
8. @storybook/builder-manager
managerBuilder.start()ではstarter関数が実行される
starter 関数では html をレンダリングし、/のレスポンスとして渡している
また、テンプレートエンジンとして ejs が使われる
このテンプレートではクライアントサイドの runtime として'./sb-manager/runtime.js'が import される
./sb-manager/runtime.jsは@storybook/managerパッケージで生成された js ファイル
(coreDirOriginのパスが@storybook/managerになっている)
`coreDirOrigin: '/storybook/sandbox/react-vite-default-ts/node_modules/@storybook/manager/dist'`
nus3
9. @storybook/manager
./sb-manager/runtime.jsのビルド前のcode/ui/manager/src/runtime.tsではrenderStorybookを使ってクライアントサイドのレンダリングをしてる
renderStorybookでは React をレンダリングしている