GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 22:21:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Switch forceRender to !forceRemount

Browse Source
This commit is contained in:
Tom Coleman 2021-08-09 22:45:32 +10:00
parent 15fe97cb8b
commit f716a4af9a
4 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/docs/src/blocks/Story.tsx
View File

@ -114,8 +114,6 @@ const Story: FunctionComponent<StoryProps> = (props) => {
kind: title,
name,
story: name,
// TODO -- shouldn't this be true sometimes? How to react to arg changes
forceRender: false,
// TODO what to do when these fail?
showMain: () => {},
showError: () => {},

8
app/react/src/client/preview/render.tsx
View File

@ -46,7 +46,7 @@ class ErrorBoundary extends Component<{
const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment;
export default async function renderMain(
{ storyContext, unboundStoryFn, showMain, showException, forceRender }: RenderContext,
{ storyContext, unboundStoryFn, showMain, showException, forceRemount }: RenderContext,
domElement: Element
) {
const Story = unboundStoryFn as FunctionComponent<StoryContext>;
@ -60,12 +60,12 @@ export default async function renderMain(
// For React 15, StrictMode & Fragment doesn't exists.
const element = Wrapper ? <Wrapper>{content}</Wrapper> : content;
// We need to unmount the existing set of components in the DOM node.
// In most cases, we need to unmount the existing set of components in the DOM node.
// Otherwise, React may not recreate instances for every story run.
// This could leads to issues like below:
// https://github.com/storybookjs/react-storybook/issues/81
// But forceRender means that it's the same story, so we want too keep the state in that case.
if (!forceRender) {
// (This is not the case when we change args or globals to the story however)
if (forceRemount) {
ReactDOM.unmountComponentAtNode(domElement);
}

2
lib/client-api/src/new/types.ts
View File

@ -59,7 +59,7 @@ export declare type RenderContextWithoutStoryContext = StoryIdentifier & {
};
export type RenderContext<StoryFnReturnType> = RenderContextWithoutStoryContext & {
forceRender: boolean;
forceRemount: boolean;
// TODO -- this is pretty surprising -- why is this here?
unboundStoryFn: LegacyStoryFn<StoryFnReturnType>;
storyContext: LoadedStoryContext & {

5
lib/core-client/src/preview/new/WebPreview.tsx
View File

@ -365,7 +365,8 @@ export class WebPreview<StoryFnReturnType> {
const updatedStoryContext = this.storyStore.getStoryContext(story);
renderContext = {
...renderContextWithoutStoryContext,
forceRender: false,
// Whenever the selection changes we want to force the component to be remounted.
forceRemount: true,
unboundStoryFn: storyFn,
storyContext: {
storyFn: () => storyFn(loadedContext),
@ -414,7 +415,7 @@ export class WebPreview<StoryFnReturnType> {
const rerenderStoryContext = this.storyStore.getStoryContext(story);
const rerenderRenderContext: RenderContext<StoryFnReturnType> = {
...renderContext,
forceRender: true,
forceRemount: false,
storyContext: {
// NOTE: loaders are not getting run again. So we are just patching
// the updated story context over the previous value (that included loader output).