Merge pull request #10910 from storybookjs/10891-send-global-args-with-SET_STORIES

Core: Send global args with set stories

lib/api/src/lib/stories.ts

@@ -112,6 +112,7 @@ export interface SetStoriesPayload {
 export interface SetStoriesPayloadV2 extends SetStoriesPayload {
   v: 2;
   error?: Error;
+  globalArgs: Args;
   globalParameters: Parameters;
   kindParameters: {
     [kind: string]: Parameters;

lib/api/src/modules/globalArgs.ts

@@ -1,5 +1,6 @@
-import { UPDATE_GLOBAL_ARGS, GLOBAL_ARGS_UPDATED } from '@storybook/core-events';
+import { SET_STORIES, UPDATE_GLOBAL_ARGS, GLOBAL_ARGS_UPDATED } from '@storybook/core-events';
 import { Args, ModuleFn } from '../index';
+import { SetStoriesPayloadV2 } from '../lib/stories';
 
 export interface SubState {
   globalArgs: Args;
@@ -23,6 +24,9 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
 
   const initModule = () => {
     fullAPI.on(GLOBAL_ARGS_UPDATED, (globalArgs: Args) => store.setState({ globalArgs }));
+    fullAPI.on(SET_STORIES, ({ globalArgs }: SetStoriesPayloadV2) =>
+      store.setState({ globalArgs })
+    );
   };
 
   return {

lib/api/src/tests/globalArgs.test.ts

@@ -1,5 +1,5 @@
 import EventEmitter from 'event-emitter';
-import { UPDATE_GLOBAL_ARGS, GLOBAL_ARGS_UPDATED } from '@storybook/core-events';
+import { SET_STORIES, UPDATE_GLOBAL_ARGS, GLOBAL_ARGS_UPDATED } from '@storybook/core-events';
 
 import { ModuleArgs, API } from '../index';
 import { init as initModule, SubAPI } from '../modules/globalArgs';
@@ -24,6 +24,21 @@ describe('stories API', () => {
     });
   });
 
+  it('set global args on SET_STORIES', () => {
+    const api = EventEmitter();
+    const store = createMockStore();
+    const { state, init } = initModule(({ store, fullAPI: api } as unknown) as ModuleArgs);
+    store.setState(state);
+    init();
+
+    api.emit(SET_STORIES, { globalArgs: { a: 'b' } });
+    expect(store.getState()).toEqual({ globalArgs: { a: 'b' } });
+
+    expect(state).toEqual({
+      globalArgs: {},
+    });
+  });
+
   it('updates the state when the preview emits GLOBAL_ARGS_UPDATED', () => {
     const api = EventEmitter();
     const store = createMockStore();

lib/client-api/src/story_store.test.ts

@@ -1,3 +1,4 @@
+//
 import createChannel from '@storybook/channel-postmessage';
 import { toId } from '@storybook/csf';
 import addons, { mockChannel } from '@storybook/addons';
@@ -666,6 +667,7 @@ describe('preview.story_store', () => {
       store.finishConfiguring();
       expect(onSetStories).toHaveBeenCalledWith({
         v: 2,
+        globalArgs: {},
         globalParameters: {},
         kindParameters: { a: {} },
         stories: {
@@ -676,6 +678,42 @@ describe('preview.story_store', () => {
       });
     });
 
+    it('correctly emits globalArgs with SET_STORIES', () => {
+      const onSetStories = jest.fn();
+      channel.on(Events.SET_STORIES, onSetStories);
+      const store = new StoryStore({ channel });
+
+      store.addGlobalMetadata({
+        decorators: [],
+        parameters: {
+          globalArgTypes: {
+            arg1: { defaultValue: 'arg1' },
+          },
+        },
+      });
+
+      addStoryToStore(store, 'a', '1', () => 0);
+      expect(onSetStories).not.toHaveBeenCalled();
+
+      store.finishConfiguring();
+      expect(onSetStories).toHaveBeenCalledWith({
+        v: 2,
+        globalArgs: { arg1: 'arg1' },
+        globalParameters: {
+          // NOTE: Currently globalArg[Types] are emitted as parameters but this may not remain
+          globalArgTypes: {
+            arg1: { defaultValue: 'arg1' },
+          },
+        },
+        kindParameters: { a: {} },
+        stories: {
+          'a--1': expect.objectContaining({
+            id: 'a--1',
+          }),
+        },
+      });
+    });
+
     it('emits an empty SET_STORIES if no stories were added during configuration', () => {
       const onSetStories = jest.fn();
       channel.on(Events.SET_STORIES, onSetStories);
@@ -684,6 +722,7 @@ describe('preview.story_store', () => {
       store.finishConfiguring();
       expect(onSetStories).toHaveBeenCalledWith({
         v: 2,
+        globalArgs: {},
         globalParameters: {},
         kindParameters: {},
         stories: {},
@@ -703,6 +742,7 @@ describe('preview.story_store', () => {
 
       expect(onSetStories).toHaveBeenCalledWith({
         v: 2,
+        globalArgs: {},
         globalParameters: {},
         kindParameters: { a: {} },
         stories: {
@@ -735,6 +775,7 @@ describe('preview.story_store', () => {
 
       expect(onSetStories).toHaveBeenCalledWith({
         v: 2,
+        globalArgs: {},
         globalParameters: {},
         kindParameters: { 'kind-1': {} },
         stories: {
@@ -770,6 +811,7 @@ describe('preview.story_store', () => {
 
       expect(onSetStories).toHaveBeenCalledWith({
         v: 2,
+        globalArgs: {},
         globalParameters: {},
         kindParameters: { 'kind-1': {}, 'kind-2': {} },
         stories: {
@@ -794,13 +836,12 @@ describe('preview.story_store', () => {
   });
 
   describe('RENDER_CURRENT_STORY', () => {
-    it('is NOT emitted when setError is called', () => {
+    it('is NOT emitted when setError is called during configuration', () => {
       const onRenderCurrentStory = jest.fn();
       channel.on(Events.RENDER_CURRENT_STORY, onRenderCurrentStory);
       const store = new StoryStore({ channel });
 
       store.setError(new Error('Something is bad!') as ErrorLike);
-      store.finishConfiguring();
       expect(onRenderCurrentStory).not.toHaveBeenCalled();
     });
 
@@ -813,13 +854,13 @@ describe('preview.story_store', () => {
       expect(onRenderCurrentStory).not.toHaveBeenCalled();
     });
 
-    it('is NOT emitted when configuration ends', () => {
+    it('is emitted when configuration ends', () => {
       const onRenderCurrentStory = jest.fn();
       channel.on(Events.RENDER_CURRENT_STORY, onRenderCurrentStory);
       const store = new StoryStore({ channel });
 
       store.finishConfiguring();
-      expect(onRenderCurrentStory).not.toHaveBeenCalled();
+      expect(onRenderCurrentStory).toHaveBeenCalled();
     });
 
     it('is emitted when setSelection is called outside of configuration', () => {
@@ -833,25 +874,4 @@ describe('preview.story_store', () => {
       expect(onRenderCurrentStory).toHaveBeenCalled();
     });
   });
-
-  describe('GLOBAL_ARGS_UPDATED', () => {
-    it('is emitted when setError is called', () => {
-      const onGlobalArgsUpdated = jest.fn();
-      channel.on(Events.GLOBAL_ARGS_UPDATED, onGlobalArgsUpdated);
-      const store = new StoryStore({ channel });
-
-      store.setError(new Error('Something is bad!') as ErrorLike);
-      store.finishConfiguring();
-      expect(onGlobalArgsUpdated).toHaveBeenCalled();
-    });
-
-    it('is emitted when configuration ends', () => {
-      const onGlobalArgsUpdated = jest.fn();
-      channel.on(Events.GLOBAL_ARGS_UPDATED, onGlobalArgsUpdated);
-      const store = new StoryStore({ channel });
-
-      store.finishConfiguring();
-      expect(onGlobalArgsUpdated).toHaveBeenCalled();
-    });
-  });
 });

lib/client-api/src/story_store.ts

@@ -151,7 +151,6 @@ export default class StoryStore {
 
   finishConfiguring() {
     this._configuring = false;
-    this.pushToManager();
 
     const { globalArgs: initialGlobalArgs, globalArgTypes } = this._globalMetadata.parameters;
 
@@ -177,8 +176,10 @@ export default class StoryStore {
       },
       { ...defaultGlobalArgs, ...initialGlobalArgs }
     );
+
+    this.pushToManager();
     if (this._channel) {
-      this._channel.emit(Events.GLOBAL_ARGS_UPDATED, this._globalArgs);
+      this._channel.emit(Events.RENDER_CURRENT_STORY);
     }
   }
 
@@ -495,6 +496,7 @@ export default class StoryStore {
     return {
       v: 2,
       globalParameters: this._globalMetadata.parameters,
+      globalArgs: this._globalArgs,
       error: this.getError(),
       kindParameters: mapValues(this._kinds, (metadata) => metadata.parameters),
       stories: this.extract({ includeDocsOnly: true, normalizeParameters: true }),