Core: Add story preloading to optimize lazy compilation #17903
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit c01880d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this branch ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
shilman
changed the title
There was a problem hiding this comment.
LGTM apart from doing unnecessary work.
Can we have a test in PreviewWeb that when it receives the event it loads the stories?
You can do something simple like:
const preview = await createAndRenderPreview();
importFn.mockReset();
await preview.onPreloadStory(['component-two--c'])
expect(importFn).toHaveBeenCalledWith(...);# Conflicts: # lib/preview-web/src/PreviewWeb.tsx
… is emitted This only happens when StoryStoreV7 is enabled
|
This can be tested in the react-ts example. @shilman and I tested it together 🎉 |
Co-authored-by: Tom Coleman <tom@chromatic.com>
Co-authored-by: Tom Coleman <tom@chromatic.com>
Would have been nice to have included a short explanation of that logic 16 years ago I used to preload web pages when the mouse was hovering a link |
|
@yairEO I'm preloading stories which would be navigated to if the user used the keyboard shortcuts to jump to the next and previous component. |
|
Great recommendation on the hover, would you be interested in implementing that as a contribution? I could do it, but if it's something you'd be keen to do as well, I could assist! LMK |
| @@ -16,6 +16,8 @@ enum events { | |||
| FORCE_RE_RENDER = 'forceReRender', | |||
| // Force the current story to re-render from scratch, with its initial args | |||
| FORCE_REMOUNT = 'forceRemount', | |||
| // Request the story has been loaded into the store, ahead of time, before it's actually | |||
There was a problem hiding this comment.
The sentence ends abruptly :) before it's actually what?
Also, that is a missing word between story and has, like which
I would prefer you do it because it would take me a long long time to understand the codebase and I also don't know typescript... I try to avoid typescript until it dies like coffescript (hopefully!) :p |
What I did
When using lazy-compilation, loading a story can take a bit of time, this tries to optimize that experience a bit, by guessing which story you'll visit next, and sending a command to the preview to preload the related stories ahead of time.