chore: Improve React Fast Refresh in storybook #7435
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
devongovett
changed the title
snowystinger
previously approved these changes
Nov 26, 2024
There was a problem hiding this comment.
Ran it locally, I can't get to a bunch of the s1 stories (ie. ActionBar/ActionGroup/Breadcrumbs/Button/ButtonGroup/ColorField/ColorSlider).
ActionBarStory is not defined
works fine in the CI built one, is there some cache I might have locally? i got rid of the parcel cache and cleaned the yarn cache
LFDanLu
approved these changes
Nov 26, 2024
snowystinger
approved these changes
Nov 26, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I moved the Parcel plugins we use for storybook into an official Parcel repo: https://github.com/parcel-bundler/storybook. Updated them to handle React Fast Refresh much better than before. Now you can edit a component or a story and it'll hot update without losing state. In addition, updating the prop types in TypeScript will also hot reload without needing to restart Storybook. It also includes the original story source automatically instead of needing to manually copy and paste it into a string.
Fast Refresh also requires us to change the syntax we use for
forwardRef, since it requires that component names must start with an upper case letter and not an underscore. I wrote a codemod to convert this syntax since it is so pervasive, and it now uses an inline style rather than declaring a separate variable. That is the majority of the diff.