Docs: Fix Source block snippet updates #22807
Conversation
chakAs3
changed the title
…torybookjs/storybook into build/fix-next-chromatic-tests
I'm not super concerned about optimizing, it's just that there's an entanglement between the What that means is in the future, someone might come along and make a change to the container that makes sense in isolation (like optimizing, or something else?) and then breaks the
I'm not sure I understand. The parameter can't change without changing story, right? |
Optimize webpack-builder: minify using swc
Migrate @storybook/web-components to strict TS
I mean it is possible that I don't change args, but I still need to rerender the snippet, I want my source to include script setup tag for example, nothing to do with args or rendered story |
These two snippets are for the same exact story. |
100% Exact Container should not decide how Source Block behaves, should provide state whenever got changed. here it is true all blocks will get notified but that ok even if they rerender React handle the render optimisation by diffing, to make sure that the changed block will rerender properly to Real DOM |
I don't get it. |
Co-authored-by: Jeppe Reinhold <jeppe@chromatic.com>
Add CODEOWNERS
…lighter-wrap Storysource: Fix StyledSyntaxHighlighter to wrap long lines
yes but withScript does not impact the story render, only the source decorator, it is ok if you considered it not the same story, but Source Container use only the args as hashed id. |
|
But what I am saying is if the parameter is different it will a different story, thus stored in the source container differently. In either case the source container will update if it gets a new value for a given story/args' source so I'm not seeing the relevance. |
Yes that is what it should be and what I did, I removed the optimisation test and just call setSources to update, and Each block will figure out what to render |
|
@chakAs3 Jumping in late here. Looking through the conversation it looks like this PR re-renders all source snippets on the page every time there is a I looked the code a bit and it's not clear the best way to circumvent the rules of hooks with hacky workarounds, so I'd say let's go with @chakAs3 's fix for now. The rules of hooks thing will go away in Storybook 8.0 when we get rid of the deprecated code, so I'm going to add a comment to update things then. |
Excited for Storybook 8.0. For me, the block should be only responsible for the snippet display behavior ( layout, style , actions: show/hide. , copy ..) export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) => {
const skip = skipSourceRender(context);
const story = storyFn();
watch(
() => context.args,
() => {
if (!skip) {
generateSource(context);
}
},
{ immediate: true, deep: true }
);
return story;
};so I really watching the changes, but again as you said the hooks implementation may mess with all this, as we need to call them every time, it is a temporary fix, but the work. will be more on the other side before. firing the event maybe |
JReinhold
added
the
patch:done
Closes #22679 #22645
What I did
Many users reported the same bug #22679.
in case the story has a boolean arg going back and forth between true/false. will not update the Source block.
previous code compares the newSource and current Source Object that contains all the sources using the stringified args as id, so if you toggle between 2 hashes that are already in the sources, you will not get any difference.
the fix is to compare the last source snippet with the new one
How to test
Run any sandbox the bug related to SourceContainer e.g.
yarn task --task sandbox --start-from auto --template react-vite/default-ts2. Open Storybook in your browser
3. Access Any story
-->
Checklist
MIGRATION.MD
Maintainers
make sure to add the
ci:mergedorci:dailyGH label to it.["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]