Ignore globals from non-local refs

examples/official-storybook/main.ts

@@ -8,6 +8,9 @@ module.exports = {
     './stories/**/*.stories.@(js|ts|tsx|mdx)',
     './../../addons/docs/**/*.stories.tsx',
   ],
+  refs: {
+    'cra-ts-essentials': 'http://localhost:9009',
+  },
   addons: [
     {
       name: '@storybook/addon-docs',

lib/addons/src/hooks.ts

@@ -420,7 +420,7 @@ export function useGlobals(): [Args, (newGlobals: Args) => void] {
   const { globals } = useStoryContext();
 
   const updateGlobals = useCallback(
-    (newGlobals: Args) => channel.emit(UPDATE_GLOBALS, newGlobals),
+    (newGlobals: Args) => channel.emit(UPDATE_GLOBALS, { globals: newGlobals }),
     [channel]
   );
 

lib/api/src/modules/globals.ts

@@ -1,6 +1,9 @@
 import { SET_STORIES, UPDATE_GLOBALS, GLOBALS_UPDATED } from '@storybook/core-events';
+import { logger } from '@storybook/client-logger';
+
 import { Args, ModuleFn } from '../index';
 import { SetStoriesPayloadV2 } from '../lib/stories';
+import { getSourceType } from './refs';
 
 export interface SubState {
   globals: Args;
@@ -13,7 +16,13 @@ export interface SubAPI {
 export const init: ModuleFn = ({ store, fullAPI }) => {
   const api: SubAPI = {
     updateGlobals(newGlobals) {
-      fullAPI.emit(UPDATE_GLOBALS, newGlobals);
+      // Only emit the message to the local ref
+      fullAPI.emit(UPDATE_GLOBALS, {
+        globals: newGlobals,
+        options: {
+          target: 'storybook-preview-iframe',
+        },
+      });
     },
   };
 
@@ -23,8 +32,46 @@ export const init: ModuleFn = ({ store, fullAPI }) => {
   };
 
   const initModule = () => {
-    fullAPI.on(GLOBALS_UPDATED, (globals: Args) => store.setState({ globals }));
+    fullAPI.on(GLOBALS_UPDATED, function handleGlobalsUpdated({ globals }: { globals: Args }) {
-    fullAPI.on(SET_STORIES, ({ globals }: SetStoriesPayloadV2) => store.setState({ globals }));
+      const { source }: { source: string } = this;
+      const [sourceType] = getSourceType(source);
+
+      switch (sourceType) {
+        case 'local': {
+          store.setState({ globals });
+          break;
+        }
+        case 'external': {
+          logger.warn(
+            'received a GLOBALS_UPDATED from a non-local ref. This is not currently supported.'
+          );
+          break;
+        }
+        default: {
+          logger.warn('received a SET_STORIES frame that was not configured as a ref');
+        }
+      }
+    });
+    fullAPI.on(SET_STORIES, function handleSetStories({ globals }: SetStoriesPayloadV2) {
+      const { source }: { source: string } = this;
+      const [sourceType] = getSourceType(source);
+
+      switch (sourceType) {
+        case 'local': {
+          store.setState({ globals });
+          break;
+        }
+        case 'external': {
+          if (Object.keys(globals).length > 0) {
+            logger.warn('received globals from a non-local ref. This is not currently supported.');
+          }
+          break;
+        }
+        default: {
+          // This is already going to be warned about in stories.ts
+        }
+      }
+    });
   };
 
   return {

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

@@ -1,9 +1,24 @@
-import EventEmitter from 'event-emitter';
+import EventEmitter from 'events';
 import { SET_STORIES, UPDATE_GLOBALS, GLOBALS_UPDATED } from '@storybook/core-events';
+import { location } from 'global';
+import { logger } from '@storybook/client-logger';
 
 import { ModuleArgs, API } from '../index';
 import { init as initModule, SubAPI } from '../modules/globals';
 
+jest.mock('@storybook/client-logger');
+
+const mockLocation = jest.fn();
+class LocalEventEmitter extends EventEmitter {
+  on(event, callback) {
+    return super.on(event, (...args) => callback.apply({ source: mockLocation() }, args));
+  }
+}
+
+beforeEach(() => {
+  mockLocation.mockReturnValue(location.toString());
+});
+
 function createMockStore() {
   let state = {};
   return {
@@ -25,7 +40,7 @@ describe('stories API', () => {
   });
 
   it('set global args on SET_STORIES', () => {
-    const api = EventEmitter();
+    const api = new LocalEventEmitter();
     const store = createMockStore();
     const { state, init } = initModule(({ store, fullAPI: api } as unknown) as ModuleArgs);
     store.setState(state);
@@ -39,25 +54,52 @@ describe('stories API', () => {
     });
   });
 
+  it('ignores SET_STORIES from other refs', () => {
+    const api = new LocalEventEmitter();
+    const store = createMockStore();
+    const { state, init } = initModule(({ store, fullAPI: api } as unknown) as ModuleArgs);
+    store.setState(state);
+    init();
+
+    mockLocation.mockReturnValueOnce('https://ref');
+    api.emit(SET_STORIES, { globals: { a: 'b' } });
+    expect(store.getState()).toEqual({ globals: {} });
+  });
+
   it('updates the state when the preview emits GLOBALS_UPDATED', () => {
-    const api = EventEmitter();
+    const api = new LocalEventEmitter();
     const store = createMockStore();
     const { state, init } = initModule(({ store, fullAPI: api } as unknown) as ModuleArgs);
     store.setState(state);
 
     init();
 
-    api.emit(GLOBALS_UPDATED, { a: 'b' });
+    api.emit(GLOBALS_UPDATED, { globals: { a: 'b' } });
     expect(store.getState()).toEqual({ globals: { a: 'b' } });
 
-    api.emit(GLOBALS_UPDATED, { a: 'c' });
+    api.emit(GLOBALS_UPDATED, { globals: { a: 'c' } });
     expect(store.getState()).toEqual({ globals: { a: 'c' } });
 
     // SHOULD NOT merge global args
-    api.emit(GLOBALS_UPDATED, { d: 'e' });
+    api.emit(GLOBALS_UPDATED, { globals: { d: 'e' } });
     expect(store.getState()).toEqual({ globals: { d: 'e' } });
   });
 
+  it('ignores GLOBALS_UPDATED from other refs', () => {
+    const api = new LocalEventEmitter();
+    const store = createMockStore();
+    const { state, init } = initModule(({ store, fullAPI: api } as unknown) as ModuleArgs);
+    store.setState(state);
+
+    init();
+
+    mockLocation.mockReturnValueOnce('https://ref');
+    logger.warn.mockClear();
+    api.emit(GLOBALS_UPDATED, { globals: { a: 'b' } });
+    expect(store.getState()).toEqual({ globals: {} });
+    expect(logger.warn).toHaveBeenCalled();
+  });
+
   it('emits UPDATE_GLOBALS when updateGlobals is called', () => {
     const fullAPI = ({ emit: jest.fn(), on: jest.fn() } as unknown) as API;
     const store = createMockStore();
@@ -66,6 +108,9 @@ describe('stories API', () => {
     init();
 
     (api as SubAPI).updateGlobals({ a: 'b' });
-    expect(fullAPI.emit).toHaveBeenCalledWith(UPDATE_GLOBALS, { a: 'b' });
+    expect(fullAPI.emit).toHaveBeenCalledWith(UPDATE_GLOBALS, {
+      globals: { a: 'b' },
+      options: { target: 'storybook-preview-iframe' },
+    });
   });
 });

lib/client-api/src/hooks.test.js

@@ -546,7 +546,7 @@ describe('Preview hooks', () => {
         [
           (storyFn) => {
             useGlobals()[1]({ a: 'b' });
-            expect(mockChannel.emit).toHaveBeenCalledWith(UPDATE_GLOBALS, { a: 'b' });
+            expect(mockChannel.emit).toHaveBeenCalledWith(UPDATE_GLOBALS, { globals: { a: 'b' } });
             return storyFn();
           },
         ],

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

@@ -456,10 +456,12 @@ describe('preview.story_store', () => {
       addStoryToStore(store, 'a', '1', () => 0);
 
       store.updateGlobals({ foo: 'bar' });
-      expect(onGlobalsChangedChannel).toHaveBeenCalledWith({ foo: 'bar' });
+      expect(onGlobalsChangedChannel).toHaveBeenCalledWith({ globals: { foo: 'bar' } });
 
       store.updateGlobals({ baz: 'bing' });
-      expect(onGlobalsChangedChannel).toHaveBeenCalledWith({ foo: 'bar', baz: 'bing' });
+      expect(onGlobalsChangedChannel).toHaveBeenCalledWith({
+        globals: { foo: 'bar', baz: 'bing' },
+      });
     });
 
     it('should update if the UPDATE_GLOBALS event is received', () => {
@@ -467,7 +469,7 @@ describe('preview.story_store', () => {
       const store = new StoryStore({ channel: testChannel });
       addStoryToStore(store, 'a', '1', () => 0);
 
-      testChannel.emit(Events.UPDATE_GLOBALS, { foo: 'bar' });
+      testChannel.emit(Events.UPDATE_GLOBALS, { globals: { foo: 'bar' } });
 
       expect(store.getRawStory('a', '1').globals).toEqual({ foo: 'bar' });
     });

lib/client-api/src/story_store.ts

@@ -159,7 +159,9 @@ export default class StoryStore {
       this.updateStoryArgs(id, newArgs)
     );
 
-    this._channel.on(Events.UPDATE_GLOBALS, (newGlobals: Args) => this.updateGlobals(newGlobals));
+    this._channel.on(Events.UPDATE_GLOBALS, ({ globals }: { globals: Args }) =>
+      this.updateGlobals(globals)
+    );
   }
 
   startConfiguring() {
@@ -441,7 +443,7 @@ export default class StoryStore {
   updateGlobals(newGlobals: Args) {
     this._globals = { ...this._globals, ...newGlobals };
     this.storeGlobals();
-    this._channel.emit(Events.GLOBALS_UPDATED, this._globals);
+    this._channel.emit(Events.GLOBALS_UPDATED, { globals: this._globals });
   }
 
   updateStoryArgs(id: string, newArgs: Args) {