Core: Normalize parameters in store/channel

lib/api/src/index.tsx

@@ -11,10 +11,10 @@ import React, {
 } from 'react';
 
 import {
-  SET_STORIES,
   STORY_CHANGED,
   SHARED_STATE_CHANGED,
   SHARED_STATE_SET,
+  SET_STORY_STORE_DATA,
 } from '@storybook/core-events';
 import { RenderData as RouterData } from '@storybook/router';
 import { Listener } from '@storybook/channels';
@@ -93,9 +93,14 @@ export type ManagerProviderProps = RouterData &
     children: ReactNode | ((props: Combo) => ReactNode);
   };
 
+// These types are duplicated in addons.
+export type StoryId = string;
+export type StoryKind = string;
+
 export interface Args {
   [key: string]: any;
 }
+
 export interface ArgType {
   name?: string;
   description?: string;
@@ -107,6 +112,10 @@ export interface ArgTypes {
   [key: string]: ArgType;
 }
 
+export interface Parameters {
+  [key: string]: any;
+}
+
 export type ModuleFn = (m: ModuleArgs) => Module;
 
 interface Module {
@@ -350,7 +359,7 @@ export function useSharedState<S>(stateId: string, defaultState?: S) {
       [`${SHARED_STATE_SET}-client-${stateId}`]: (s: S) => setState(s),
     };
     const stateInitializationHandlers = {
-      [SET_STORIES]: () => {
+      [SET_STORY_STORE_DATA]: () => {
         if (addonStateCache[stateId]) {
           // this happens when HMR
           setState(addonStateCache[stateId]);

lib/api/src/lib/stories.ts

@@ -1,12 +1,13 @@
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 import { sanitize, parseKind } from '@storybook/csf';
+import { mapValues, mergeWith } from 'lodash';
 
-import { Args } from '../index';
+import { StoryId, StoryKind, Args, Parameters } from '../index';
 import merge from './merge';
 import { Provider } from '../modules/provider';
 
-export type StoryId = string;
+export { StoryId };
 
 export interface Root {
   id: StoryId;
@@ -46,7 +47,7 @@ export interface Story {
   depth: number;
   parent: StoryId;
   name: string;
-  kind: string;
+  kind: StoryKind;
   refId?: string;
   children?: StoryId[];
   isComponent: boolean;
@@ -70,7 +71,7 @@ export interface StoryInput {
   id: StoryId;
   name: string;
   refId?: string;
-  kind: string;
+  kind: StoryKind;
   children: string[];
   parameters: {
     fileName: string;
@@ -99,6 +100,14 @@ export interface StoriesRaw {
   [id: string]: StoryInput;
 }
 
+export interface StoryStoreData {
+  globalParameters: Parameters;
+  kindParameters: {
+    [kind: string]: Parameters;
+  };
+  stories: StoriesRaw;
+}
+
 const warnUsingHierarchySeparatorsAndShowRoots = deprecate(
   () => {},
   dedent`
@@ -131,6 +140,30 @@ const toGroup = (name: string) => ({
   id: toKey(name),
 });
 
+// This is duplicated from @storybook/client-api for the reasons mentioned in lib-addons/types.js
+const combineParameters = (...parameterSets: Parameters[]) =>
+  mergeWith({}, ...parameterSets, (objValue: any, srcValue: any) => {
+    // Treat arrays as scalars:
+    if (Array.isArray(srcValue)) return srcValue;
+
+    return undefined;
+  });
+
+export const denormalizeStoryParameters = ({
+  globalParameters,
+  kindParameters,
+  stories,
+}: StoryStoreData): StoriesRaw => {
+  return mapValues(stories, (storyData) => ({
+    ...storyData,
+    parameters: combineParameters(
+      globalParameters,
+      kindParameters[storyData.kind],
+      (storyData.parameters as unknown) as Parameters
+    ),
+  }));
+};
+
 export const transformStoriesRawToStoriesHash = (
   input: StoriesRaw,
   base: StoriesHash,

lib/api/src/modules/stories.ts

@@ -4,21 +4,24 @@ import {
   UPDATE_STORY_ARGS,
   STORY_ARGS_UPDATED,
   STORY_CHANGED,
-  SET_STORIES,
   SELECT_STORY,
+  SET_STORY_STORE_DATA,
+  LEGACY_SET_STORIES,
 } from '@storybook/core-events';
 
 import { logger } from '@storybook/client-logger';
 import {
+  denormalizeStoryParameters,
   transformStoriesRawToStoriesHash,
   StoriesHash,
   Story,
   Group,
-  StoriesRaw,
+  StoryStoreData,
   StoryId,
   isStory,
   Root,
   isRoot,
+  StoriesRaw,
 } from '../lib/stories';
 
 import { Args, ModuleFn } from '../index';
@@ -299,27 +302,52 @@ export const init: ModuleFn = ({
       }
     });
 
-    fullAPI.on(SET_STORIES, function handleSetStories(data: { stories: StoriesRaw }) {
+    fullAPI.on(SET_STORY_STORE_DATA, function handleSetStories(data: StoryStoreData) {
       // the event originates from an iframe, event.source is the iframe's location origin + pathname
-      const { storyId } = store.getState();
       const { source }: { source: string } = this;
       const sourceType = getSourceType(source);
 
+      const stories = denormalizeStoryParameters(data);
+
       switch (sourceType) {
         // if it's a local source, we do nothing special
         case 'local': {
-          fullAPI.setStories(data.stories);
-          const options = storyId
-            ? fullAPI.getParameters(storyId, 'options')
-            : fullAPI.getParameters(Object.keys(data.stories)[0], 'options');
-          fullAPI.setOptions(options);
+          fullAPI.setStories(stories);
+
+          fullAPI.setOptions((data as StoryStoreData).globalParameters.options);
           break;
         }
 
         // if it's a ref, we need to map the incoming stories to a prefixed version, so it cannot conflict with others
         case 'external': {
           const ref = fullAPI.findRef(source);
-          fullAPI.setRef(ref.id, { ...ref, ...data }, true);
+          fullAPI.setRef(ref.id, { ...ref, stories }, true);
+          break;
+        }
+
+        // if we couldn't find the source, something risky happened, we ignore the input, and log a warning
+        default: {
+          logger.warn('received a SET_STORY_STORE_DATA frame that was not configured as a ref');
+          break;
+        }
+      }
+    });
+
+    fullAPI.on(LEGACY_SET_STORIES, function handleSetStories({ stories }: { stories: StoriesRaw }) {
+      // the event originates from an iframe, event.source is the iframe's location origin + pathname
+      const { source }: { source: string } = this;
+      const sourceType = getSourceType(source);
+
+      switch (sourceType) {
+        // We shouldn't get the legacy event from the local source
+        case 'local': {
+          throw new Error('Unexpected legacy SET_STORIES event from local source');
+        }
+
+        // Basically the same as `SET_STORIES_DATA` above, except the parameters are denormalized
+        case 'external': {
+          const ref = fullAPI.findRef(source);
+          fullAPI.setRef(ref.id, { ...ref, stories }, true);
           break;
         }
 

lib/api/src/tests/stories.test.js

@@ -1,5 +1,10 @@
 import EventEmitter from 'event-emitter';
-import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS } from '@storybook/core-events';
+import {
+  STORY_ARGS_UPDATED,
+  UPDATE_STORY_ARGS,
+  SET_STORY_STORE_DATA,
+  LEGACY_SET_STORIES,
+} from '@storybook/core-events';
 
 import { init as initStories } from '../modules/stories';
 
@@ -791,4 +796,118 @@ describe('stories API', () => {
       });
     });
   });
+  describe('SET_STORY_STORE_DATA event', () => {
+    it('normalizes parameters and calls setStories for local stories', () => {
+      const fullAPI = { on: jest.fn(), setStories: jest.fn(), setOptions: jest.fn() };
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const { init } = initStories({ store, navigate, provider, fullAPI });
+      init();
+
+      const onSetStoryStoreData = fullAPI.on.mock.calls.find(
+        ([event]) => event === SET_STORY_STORE_DATA
+      )[1];
+
+      const storyStoreData = {
+        globalParameters: { global: 'global' },
+        kindParameters: { a: { kind: 'kind' } },
+        stories: { 'a--1': { kind: 'a', parameters: { story: 'story' } } },
+      };
+      onSetStoryStoreData.call({ source: 'http://localhost' }, storyStoreData);
+
+      expect(fullAPI.setStories).toHaveBeenCalledWith({
+        'a--1': { kind: 'a', parameters: { global: 'global', kind: 'kind', story: 'story' } },
+      });
+    });
+
+    it('normalizes parameters and calls setRef for external stories', () => {
+      const fullAPI = {
+        on: jest.fn(),
+        findRef: jest.fn().mockReturnValue({ id: 'ref' }),
+        setRef: jest.fn(),
+      };
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const { init } = initStories({ store, navigate, provider, fullAPI });
+      init();
+
+      const onSetStoryStoreData = fullAPI.on.mock.calls.find(
+        ([event]) => event === SET_STORY_STORE_DATA
+      )[1];
+
+      const storyStoreData = {
+        globalParameters: { global: 'global' },
+        kindParameters: { a: { kind: 'kind' } },
+        stories: { 'a--1': { kind: 'a', parameters: { story: 'story' } } },
+      };
+      onSetStoryStoreData.call({ source: 'http://external' }, storyStoreData);
+
+      expect(fullAPI.setRef).toHaveBeenCalledWith(
+        'ref',
+        {
+          id: 'ref',
+          stories: {
+            'a--1': { kind: 'a', parameters: { global: 'global', kind: 'kind', story: 'story' } },
+          },
+        },
+        true
+      );
+    });
+
+    it('calls setOptions with global options parameters', () => {
+      const fullAPI = { on: jest.fn(), setStories: jest.fn(), setOptions: jest.fn() };
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const { init } = initStories({ store, navigate, provider, fullAPI });
+      init();
+
+      const onSetStoryStoreData = fullAPI.on.mock.calls.find(
+        ([event]) => event === SET_STORY_STORE_DATA
+      )[1];
+
+      const storyStoreData = {
+        globalParameters: { options: 'options' },
+        kindParameters: { a: { options: 'should-be-ignored' } },
+        stories: { 'a--1': { kind: 'a', parameters: { options: 'should-be-ignored-also' } } },
+      };
+      onSetStoryStoreData.call({ source: 'http://localhost' }, storyStoreData);
+
+      expect(fullAPI.setOptions).toHaveBeenCalledWith('options');
+    });
+  });
+  describe('LEGACY_SET_STORIES event', () => {
+    it('calls setRef with stories', () => {
+      const fullAPI = {
+        on: jest.fn(),
+        findRef: jest.fn().mockReturnValue({ id: 'ref' }),
+        setRef: jest.fn(),
+      };
+      const navigate = jest.fn();
+      const store = createMockStore();
+
+      const { init } = initStories({ store, navigate, provider, fullAPI });
+      init();
+
+      const onSetStories = fullAPI.on.mock.calls.find(([event]) => event === LEGACY_SET_STORIES)[1];
+
+      const storiesData = {
+        stories: { 'a--1': {} },
+      };
+      onSetStories.call({ source: 'http://external' }, storiesData);
+
+      expect(fullAPI.setRef).toHaveBeenCalledWith(
+        'ref',
+        {
+          id: 'ref',
+          stories: {
+            'a--1': {},
+          },
+        },
+        true
+      );
+    });
+  });
 });

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

@@ -524,7 +524,7 @@ describe('preview.client_api', () => {
       storyStore.finishConfiguring();
 
       let [event, args] = mockChannelEmit.mock.calls[0];
-      expect(event).toEqual(Events.SET_STORIES);
+      expect(event).toEqual(Events.SET_STORY_STORE_DATA);
       expect(Object.values(args.stories as [{ kind: string }]).map((v) => v.kind)).toEqual([
         'kind0',
         'kind1',
@@ -544,7 +544,7 @@ describe('preview.client_api', () => {
       // eslint-disable-next-line prefer-destructuring
       [event, args] = mockChannelEmit.mock.calls[0];
 
-      expect(event).toEqual(Events.SET_STORIES);
+      expect(event).toEqual(Events.SET_STORY_STORE_DATA);
       expect(Object.values(args.stories as [{ kind: string }]).map((v) => v.kind)).toEqual([
         'kind0',
         'kind1',
@@ -601,6 +601,7 @@ describe('preview.client_api', () => {
         b: 'kind',
         c: 'story',
         fileName: expect.any(String),
+        argTypes: {},
       });
     });
 
@@ -653,6 +654,7 @@ describe('preview.client_api', () => {
           },
         },
         fileName: expect.any(String),
+        argTypes: {},
       });
     });
   });