Ensure we always re-render docs when globals change

storybookjs · Jul 14, 2022 · 47c51cc · 47c51cc
1 parent d8b658d
commit 47c51cc
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/lib/preview-web/src/DocsRender.ts b/lib/preview-web/src/DocsRender.ts
@@ -72,12 +72,12 @@ export class DocsRender<TFramework extends AnyFramework> implements Render<TFram
     );
   }
 
-  async rerender() {
+  async rerender(isGlobals: boolean) {
     // NOTE: in modern inline render mode, each story is rendered via
     // `preview.renderStoryToElement` which means the story will track
     // its own re-renders. Thus there will be no need to re-render the whole
     // docs page when a single story changes.
-    if (!global.FEATURES?.modernInlineRender) await this.render();
+    if (!global.FEATURES?.modernInlineRender || isGlobals) await this.render();
   }
 
   async teardown({ viewModeChanged }: { viewModeChanged?: boolean } = {}) {

diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts
@@ -686,7 +686,27 @@ describe('PreviewWeb', () => {
       expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
     });
 
-    describe('in docs mode', () => {
+    describe('in docs mode, legacy inline render', () => {
+      it('re-renders the docs container', async () => {
+        document.location.search = '?id=component-one--a&viewMode=docs';
+
+        await createAndRenderPreview();
+
+        mockChannel.emit.mockClear();
+        emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
+        await waitForRender();
+
+        expect(ReactDOM.render).toHaveBeenCalledTimes(2);
+      });
+    });
+
+    describe('in docs mode, modern inline render', () => {
+      beforeEach(() => {
+        global.FEATURES.modernInlineRender = true;
+      });
+      afterEach(() => {
+        global.FEATURES.modernInlineRender = false;
+      });
       it('re-renders the docs container', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';
 
@@ -982,7 +1002,7 @@ describe('PreviewWeb', () => {
         global.FEATURES.modernInlineRender = true;
       });
       afterEach(() => {
-        global.FEATURES.modernInlineRender = true;
+        global.FEATURES.modernInlineRender = false;
       });
       it('does not re-render the docs container', async () => {
         document.location.search = '?id=component-one--a&viewMode=docs';

diff --git a/lib/preview-web/src/PreviewWeb.tsx b/lib/preview-web/src/PreviewWeb.tsx
@@ -212,7 +212,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
   async onUpdateGlobals({ globals }: { globals: Globals }) {
     super.onUpdateGlobals({ globals });
 
-    if (this.currentRender instanceof DocsRender) await this.currentRender.rerender();
+    if (this.currentRender instanceof DocsRender) await this.currentRender.rerender(true);
   }
 
   async onUpdateArgs({ storyId, updatedArgs }: { storyId: StoryId; updatedArgs: Args }) {
@@ -223,7 +223,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
     // of which ones were rendered by the docs page.
     // However, in `modernInlineRender`, the individual stories track their own events as they
     // each call `renderStoryToElement` below.
-    if (this.currentRender instanceof DocsRender) await this.currentRender.rerender();
+    if (this.currentRender instanceof DocsRender) await this.currentRender.rerender(false);
   }
 
   async onPreloadStories(ids: string[]) {