Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web: enable storyStoreV7 in Storybook #38199

Merged
merged 3 commits into from
Jul 7, 2022
Merged

Conversation

valerybugakov
Copy link
Member

@valerybugakov valerybugakov commented Jul 5, 2022

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

  1. Ensure that yarn storybook works locally.
  2. Ensure that Storybook-related CI checks are green.

App preview:

Check out the client app preview documentation to learn more.

@valerybugakov valerybugakov added the frontend-platform Issues related to our frontend platform, owned collectively by our frontend crew. label Jul 5, 2022
@valerybugakov valerybugakov self-assigned this Jul 5, 2022
@cla-bot cla-bot bot added the cla-signed label Jul 5, 2022
@valerybugakov valerybugakov marked this pull request as ready for review July 5, 2022 13:53
@valerybugakov valerybugakov requested review from lrhacker, oleggromov, umpox and a team July 5, 2022 13:53
@sourcegraph-bot
Copy link
Contributor

sourcegraph-bot commented Jul 5, 2022

Codenotify: Notifying subscribers in CODENOTIFY files for diff 6e368e0...39fd8c5.

Notify File(s)
@limitedmage client/web/src/search/home/SearchPage.story.tsx

@valerybugakov
Copy link
Member Author

valerybugakov commented Jul 5, 2022

The CI was green before the incident when the PR was in the draft mode, I swear!

Copy link
Contributor

@jasongornall jasongornall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks solid to me I see no issues / tested works great

@valerybugakov valerybugakov merged commit 33a4527 into main Jul 7, 2022
@valerybugakov valerybugakov deleted the vb/enable-story-store-v7 branch July 7, 2022 02:36
vovakulikov pushed a commit that referenced this pull request Jul 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cla-signed frontend-platform Issues related to our frontend platform, owned collectively by our frontend crew.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Enable lazy compilation in Storybook
3 participants