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

Ignore globals from non-local refs

Browse Source
This commit is contained in:
Tom Coleman 2020-07-03 20:28:34 +10:00
parent b18ef1c371
commit c55a62d2fd
7 changed files with 116 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/official-storybook/main.ts
View File

@ -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',

2
lib/addons/src/hooks.ts
View File

@ -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]
);

53
lib/api/src/modules/globals.ts
View File

@ -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(SET_STORIES, ({ globals }: SetStoriesPayloadV2) => store.setState({ globals }));
fullAPI.on(GLOBALS_UPDATED, function handleGlobalsUpdated({ globals }: { globals: Args }) {
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 {

59
lib/api/src/tests/globals.test.ts
View File

@ -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' },
});
});
});

2
lib/client-api/src/hooks.test.js
View File

@ -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();
},
],

8
lib/client-api/src/story_store.test.ts
View File

@ -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' });
});

6
lib/client-api/src/story_store.ts
View File

@ -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) {