web: enable `storyStoreV7` in Storybook
Created by: valerybugakov
Context
TLDR: this PR completes the migration to the storyStoreV7
and enables us to use all new goodies from the latest Storybook versions. It won't be possible to use storiesOf()
API anymore for new stories. Migration documentation.
SB6.4 introduces an opt-in feature flag, features.storyStoreV7, which loads stories in an "on demand" way (that is when rendered), rather than up front when the Storybook is booted. This way of operating will become the default in 7.0 and will likely be switched to opt-out in that version.
The key benefit of the on demand store is that stories are code-split automatically (in builder-webpack4 and builder-webpack5), which allows for much smaller bundle sizes, faster rendering, and improved general performance via various opt-in Webpack features.
The on-demand store relies on the "story index" data structure which is generated in the server (node) via static code analysis. As such, it has the following limitations:
Does not work with storiesOf() Does not work if you use dynamic story names or component titles.
Link to the release blog post. Partially closes https://github.com/sourcegraph/sourcegraph/issues/36438.
Lazy-compilation
The lazy compilation doesn't seem stable enough to enable it by default. It fails to load stories when a user navigates to another story without waiting for the opened one to load. Try it out locally by changing the setting the lazyCompilation
option to true
in the Storybook Webpack configuration.
Test plan
- Ensure that
yarn storybook
works locally. - Ensure that Storybook-related CI checks are green.
App preview:
Check out the client app preview documentation to learn more.