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

Core: On demand store #15871

Merged
merged 296 commits into from
Sep 14, 2021
Merged

Core: On demand store #15871

merged 296 commits into from
Sep 14, 2021

Conversation

tmeasday
Copy link
Member

@tmeasday tmeasday commented Aug 18, 2021

From the migration notes:

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 used dynamic story names or component titles.

However, the autoTitle feature is supported.

Behavioral differences

The key behavioral differences of the v7 store are:

  • SET_STORIES is not emitted on boot up. Instead the manager loads the story index independenly.
  • A new event STORY_PREPARED is emitted when a story is rendered for the first time, which contains metadata about the story, such as parameters.
  • All "entire" store APIs such as extract() need to be proceeded by an async call to loadAllCSFFiles() which fetches all CSF files and processes them.

Using the v7 store

To activate the v7 mode set the feature flag in your .storybook/main.js config:

module.exports = {
  // ... your existing config
  features: {
    storyStoreV7: true,
  },
};

NOTE: features.storyStoreV7 implies features.buildStoriesJson and has the same limitations.


This PR is too large to be sensibly reviewed, instead it has been split into several smaller PRs that can be examined separately and changes will be cherry picked back here:


Current limitations:

  • HMR is not fully supported in the v7 store, adding/removing stories will not be picked up, you need to reload the page manually.
  • v7 mode currently does not work with Storyshots
  • v7 mode currently does not work with Composition
  • v7 mode currently does not work with Links
  • No UI is currently show for async story rendering (not necessarily a big problem but could be improved).

These limitations will be addressed in follow up PRs.

@nx-cloud
Copy link

nx-cloud bot commented Aug 18, 2021

Nx Cloud Report

CI ran the following commands for commit 5a981b4. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status Command
#000000 nx run-many --target=prepare --all --parallel --max-parallel=15

Sent with 💌 from NxCloud.

@shilman shilman added this to the 6.4 perf milestone Sep 14, 2021
@shilman shilman changed the title On demand store Core: On demand store Sep 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants