mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
Refactor client / config / redux API into core
Questionable changes: - ability to pass a story decorator function - pass clearDecorators to ConfigAPI React/Vue/Angular working (apparently). RN still broken.
This commit is contained in:
Michael Shilman
parent
9eca833707
commit
4573883f70
94
app/angular/src/client/preview/client_api.js
vendored
94
app/angular/src/client/preview/client_api.js
vendored
@ -1,94 +0,0 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
||||
export default class ClientApi {
|
||||
constructor({ channel, storyStore }) {
|
||||
// channel can be null when running in node
|
||||
// always check whether channel is available
|
||||
this._channel = channel;
|
||||
this._storyStore = storyStore;
|
||||
this._addons = {};
|
||||
this._globalDecorators = [];
|
||||
}
|
||||
|
||||
setAddon(addon) {
|
||||
this._addons = {
|
||||
...this._addons,
|
||||
...addon,
|
||||
};
|
||||
}
|
||||
|
||||
addDecorator(decorator) {
|
||||
this._globalDecorators.push(decorator);
|
||||
}
|
||||
|
||||
clearDecorators() {
|
||||
this._globalDecorators = [];
|
||||
}
|
||||
|
||||
storiesOf(kind, m) {
|
||||
if (!kind && typeof kind !== 'string') {
|
||||
throw new Error('Invalid or missing kind provided for stories, should be a string');
|
||||
}
|
||||
|
||||
if (m && m.hot) {
|
||||
m.hot.dispose(() => {
|
||||
this._storyStore.removeStoryKind(kind);
|
||||
});
|
||||
}
|
||||
|
||||
const localDecorators = [];
|
||||
const api = {
|
||||
kind,
|
||||
};
|
||||
|
||||
// apply addons
|
||||
Object.keys(this._addons).forEach(name => {
|
||||
const addon = this._addons[name];
|
||||
api[name] = (...args) => {
|
||||
addon.apply(api, args);
|
||||
return api;
|
||||
};
|
||||
});
|
||||
|
||||
api.add = (storyName, getStory) => {
|
||||
if (typeof storyName !== 'string') {
|
||||
throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
|
||||
}
|
||||
|
||||
if (this._storyStore.hasStory(kind, storyName)) {
|
||||
throw new Error(`Story of "${kind}" named "${storyName}" already exists`);
|
||||
}
|
||||
|
||||
// Wrap the getStory function with each decorator. The first
|
||||
// decorator will wrap the story function. The second will
|
||||
// wrap the first decorator and so on.
|
||||
const decorators = [...localDecorators, ...this._globalDecorators];
|
||||
|
||||
const getDecoratedStory = decorators.reduce(
|
||||
(decorated, decorator) => context => decorator(() => decorated(context), context),
|
||||
getStory
|
||||
);
|
||||
|
||||
// Add the fully decorated getStory function.
|
||||
this._storyStore.addStory(kind, storyName, getDecoratedStory);
|
||||
return api;
|
||||
};
|
||||
|
||||
api.addDecorator = decorator => {
|
||||
localDecorators.push(decorator);
|
||||
return api;
|
||||
};
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
getStorybook() {
|
||||
return this._storyStore.getStoryKinds().map(kind => {
|
||||
const stories = this._storyStore.getStories(kind).map(name => {
|
||||
const render = this._storyStore.getStory(kind, name);
|
||||
return { name, render };
|
||||
});
|
||||
return { kind, stories };
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,250 +0,0 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
||||
import ClientAPI from './client_api';
|
||||
|
||||
class StoryStore {
|
||||
constructor() {
|
||||
this.stories = [];
|
||||
}
|
||||
|
||||
addStory(kind, story, fn) {
|
||||
this.stories.push({ kind, story, fn });
|
||||
}
|
||||
|
||||
getStoryKinds() {
|
||||
return this.stories.reduce((kinds, info) => {
|
||||
if (kinds.indexOf(info.kind) === -1) {
|
||||
kinds.push(info.kind);
|
||||
}
|
||||
return kinds;
|
||||
}, []);
|
||||
}
|
||||
|
||||
getStories(kind) {
|
||||
return this.stories.reduce((stories, info) => {
|
||||
if (info.kind === kind) {
|
||||
stories.push(info.story);
|
||||
}
|
||||
return stories;
|
||||
}, []);
|
||||
}
|
||||
|
||||
getStory(kind, name) {
|
||||
return this.stories.reduce((fn, info) => {
|
||||
if (!fn && info.kind === kind && info.story === name) {
|
||||
return info.fn;
|
||||
}
|
||||
return fn;
|
||||
}, null);
|
||||
}
|
||||
|
||||
hasStory(kind, name) {
|
||||
return Boolean(this.getStory(kind, name));
|
||||
}
|
||||
}
|
||||
|
||||
describe('preview.client_api', () => {
|
||||
describe('setAddon', () => {
|
||||
it('should register addons', () => {
|
||||
const api = new ClientAPI({});
|
||||
let data;
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data = 'foo';
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').aa();
|
||||
expect(data).toBe('foo');
|
||||
});
|
||||
|
||||
it('should not remove previous addons', () => {
|
||||
const api = new ClientAPI({});
|
||||
const data = [];
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data.push('foo');
|
||||
},
|
||||
});
|
||||
|
||||
api.setAddon({
|
||||
bb() {
|
||||
data.push('bar');
|
||||
},
|
||||
});
|
||||
|
||||
api
|
||||
.storiesOf('none')
|
||||
.aa()
|
||||
.bb();
|
||||
expect(data).toEqual(['foo', 'bar']);
|
||||
});
|
||||
|
||||
it('should call with the api context', () => {
|
||||
const api = new ClientAPI({});
|
||||
let data;
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data = typeof this.add;
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').aa();
|
||||
expect(data).toBe('function');
|
||||
});
|
||||
|
||||
it('should be able to access addons added previously', () => {
|
||||
const api = new ClientAPI({});
|
||||
let data;
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data = 'foo';
|
||||
},
|
||||
});
|
||||
|
||||
api.setAddon({
|
||||
bb() {
|
||||
this.aa();
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none').bb();
|
||||
expect(data).toBe('foo');
|
||||
});
|
||||
|
||||
it('should be able to access the current kind', () => {
|
||||
const api = new ClientAPI({});
|
||||
const kind = 'dfdwf3e3';
|
||||
let data;
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data = this.kind;
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf(kind).aa();
|
||||
expect(data).toBe(kind);
|
||||
});
|
||||
});
|
||||
|
||||
describe('addDecorator', () => {
|
||||
it('should add local decorators', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
localApi.addDecorator(fn => `aa-${fn()}`);
|
||||
|
||||
localApi.add('storyName', () => 'Hello');
|
||||
expect(storyStore.stories[0].fn()).toBe('aa-Hello');
|
||||
});
|
||||
|
||||
it('should add global decorators', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
api.addDecorator(fn => `bb-${fn()}`);
|
||||
const localApi = api.storiesOf('none');
|
||||
|
||||
localApi.add('storyName', () => 'Hello');
|
||||
expect(storyStore.stories[0].fn()).toBe('bb-Hello');
|
||||
});
|
||||
|
||||
it('should utilize both decorators at once', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
|
||||
api.addDecorator(fn => `aa-${fn()}`);
|
||||
localApi.addDecorator(fn => `bb-${fn()}`);
|
||||
|
||||
localApi.add('storyName', () => 'Hello');
|
||||
expect(storyStore.stories[0].fn()).toBe('aa-bb-Hello');
|
||||
});
|
||||
|
||||
it('should pass the context', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
localApi.addDecorator(fn => `aa-${fn()}`);
|
||||
|
||||
localApi.add('storyName', ({ kind, story }) => `${kind}-${story}`);
|
||||
|
||||
const kind = 'dfdfd';
|
||||
const story = 'ef349ff';
|
||||
|
||||
const result = storyStore.stories[0].fn({ kind, story });
|
||||
expect(result).toBe(`aa-${kind}-${story}`);
|
||||
});
|
||||
|
||||
it('should have access to the context', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none');
|
||||
localApi.addDecorator((fn, { kind, story }) => `${kind}-${story}-${fn()}`);
|
||||
|
||||
localApi.add('storyName', () => 'Hello');
|
||||
|
||||
const kind = 'dfdfd';
|
||||
const story = 'ef349ff';
|
||||
|
||||
const result = storyStore.stories[0].fn({ kind, story });
|
||||
expect(result).toBe(`${kind}-${story}-Hello`);
|
||||
});
|
||||
});
|
||||
|
||||
describe('clearDecorators', () => {
|
||||
it('should remove all global decorators', () => {
|
||||
const api = new ClientAPI({});
|
||||
api._globalDecorators = 1234;
|
||||
api.clearDecorators();
|
||||
expect(api._globalDecorators).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getStorybook', () => {
|
||||
it('should return storybook when empty', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const book = api.getStorybook();
|
||||
expect(book).toEqual([]);
|
||||
});
|
||||
|
||||
it('should return storybook with stories', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const functions = {
|
||||
'story-1.1': () => 'story-1.1',
|
||||
'story-1.2': () => 'story-1.2',
|
||||
'story-2.1': () => 'story-2.1',
|
||||
'story-2.2': () => 'story-2.2',
|
||||
};
|
||||
const kind1 = api.storiesOf('kind-1');
|
||||
kind1.add('story-1.1', functions['story-1.1']);
|
||||
kind1.add('story-1.2', functions['story-1.2']);
|
||||
const kind2 = api.storiesOf('kind-2');
|
||||
kind2.add('story-2.1', functions['story-2.1']);
|
||||
kind2.add('story-2.2', functions['story-2.2']);
|
||||
const book = api.getStorybook();
|
||||
expect(book).toEqual([
|
||||
{
|
||||
kind: 'kind-1',
|
||||
stories: [
|
||||
{ name: 'story-1.1', render: functions['story-1.1'] },
|
||||
{ name: 'story-1.2', render: functions['story-1.2'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
kind: 'kind-2',
|
||||
stories: [
|
||||
{ name: 'story-2.1', render: functions['story-2.1'] },
|
||||
{ name: 'story-2.2', render: functions['story-2.2'] },
|
||||
],
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
67
app/angular/src/client/preview/config_api.js
vendored
67
app/angular/src/client/preview/config_api.js
vendored
@ -1,67 +0,0 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
||||
import { location } from 'global';
|
||||
import { setInitialStory, setError, clearError } from './actions';
|
||||
import { clearDecorators } from './';
|
||||
|
||||
export default class ConfigApi {
|
||||
constructor({ channel, storyStore, reduxStore }) {
|
||||
// channel can be null when running in node
|
||||
// always check whether channel is available
|
||||
this._channel = channel;
|
||||
this._storyStore = storyStore;
|
||||
this._reduxStore = reduxStore;
|
||||
}
|
||||
|
||||
_renderMain(loaders) {
|
||||
if (loaders) loaders();
|
||||
|
||||
const stories = this._storyStore.dumpStoryBook();
|
||||
// send to the parent frame.
|
||||
this._channel.emit('setStories', { stories });
|
||||
|
||||
// clear the error if exists.
|
||||
this._reduxStore.dispatch(clearError());
|
||||
this._reduxStore.dispatch(setInitialStory(stories));
|
||||
}
|
||||
|
||||
_renderError(e) {
|
||||
const { stack, message } = e;
|
||||
const error = { stack, message };
|
||||
this._reduxStore.dispatch(setError(error));
|
||||
}
|
||||
|
||||
configure(loaders, module) {
|
||||
const render = () => {
|
||||
try {
|
||||
this._renderMain(loaders);
|
||||
} catch (error) {
|
||||
if (module.hot && module.hot.status() === 'apply') {
|
||||
// We got this issue, after webpack fixed it and applying it.
|
||||
// Therefore error message is displayed forever even it's being fixed.
|
||||
// So, we'll detect it reload the page.
|
||||
location.reload();
|
||||
} else {
|
||||
// If we are accessing the site, but the error is not fixed yet.
|
||||
// There we can render the error.
|
||||
this._renderError(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept(() => {
|
||||
setTimeout(render);
|
||||
});
|
||||
module.hot.dispose(() => {
|
||||
clearDecorators();
|
||||
});
|
||||
}
|
||||
|
||||
if (this._channel) {
|
||||
render();
|
||||
} else {
|
||||
loaders();
|
||||
}
|
||||
}
|
||||
}
|
||||
13
app/angular/src/client/preview/index.js
vendored
13
app/angular/src/client/preview/index.js
vendored
@ -3,13 +3,9 @@ import { createStore } from 'redux';
|
||||
import addons from '@storybook/addons';
|
||||
import createChannel from '@storybook/channel-postmessage';
|
||||
import qs from 'qs';
|
||||
import { StoryStore } from '@storybook/core/client';
|
||||
import ClientApi from './client_api';
|
||||
import ConfigApi from './config_api';
|
||||
import render from './render';
|
||||
import { StoryStore, ClientApi, ConfigApi, Actions, reducer } from '@storybook/core/client';
|
||||
import init from './init';
|
||||
import { selectStory } from './actions';
|
||||
import reducer from './reducer';
|
||||
import render from './render';
|
||||
|
||||
// check whether we're running on node/browser
|
||||
const isBrowser =
|
||||
@ -25,7 +21,7 @@ if (isBrowser) {
|
||||
const queryParams = qs.parse(window.location.search.substring(1));
|
||||
const channel = createChannel({ page: 'preview' });
|
||||
channel.on('setCurrentStory', data => {
|
||||
reduxStore.dispatch(selectStory(data.kind, data.story));
|
||||
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
|
||||
});
|
||||
Object.assign(context, { channel, window, queryParams });
|
||||
addons.setChannel(channel);
|
||||
@ -33,7 +29,6 @@ if (isBrowser) {
|
||||
}
|
||||
|
||||
const clientApi = new ClientApi(context);
|
||||
const configApi = new ConfigApi(context);
|
||||
|
||||
// do exports
|
||||
export const storiesOf = clientApi.storiesOf.bind(clientApi);
|
||||
@ -41,6 +36,8 @@ export const setAddon = clientApi.setAddon.bind(clientApi);
|
||||
export const addDecorator = clientApi.addDecorator.bind(clientApi);
|
||||
export const clearDecorators = clientApi.clearDecorators.bind(clientApi);
|
||||
export const getStorybook = clientApi.getStorybook.bind(clientApi);
|
||||
|
||||
const configApi = new ConfigApi({ clearDecorators, ...context });
|
||||
export const configure = configApi.configure.bind(configApi);
|
||||
|
||||
// initialize the UI
|
||||
|
||||
4
app/angular/src/client/preview/init.js
vendored
4
app/angular/src/client/preview/init.js
vendored
@ -1,11 +1,11 @@
|
||||
import keyEvents from '@storybook/ui/dist/libs/key_events';
|
||||
import { selectStory } from './actions';
|
||||
import { Actions } from '@storybook/core/client';
|
||||
|
||||
export default function(context) {
|
||||
const { queryParams, reduxStore, window, channel } = context;
|
||||
// set the story if correct params are loaded via the URL.
|
||||
if (queryParams.selectedKind) {
|
||||
reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
|
||||
reduxStore.dispatch(Actions.selectStory(queryParams.selectedKind, queryParams.selectedStory));
|
||||
}
|
||||
|
||||
// Handle keyEvents and pass them to the parent.
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
export const types = {
|
||||
SET_ERROR: 'PREVIEW_SET_ERROR',
|
||||
CLEAR_ERROR: 'PREVIEW_CLEAR_ERROR',
|
||||
SELECT_STORY: 'PREVIEW_SELECT_STORY',
|
||||
SET_INITIAL_STORY: 'PREVIEW_SET_INITIAL_STORY',
|
||||
};
|
||||
|
||||
export function setInitialStory(storyKindList) {
|
||||
return {
|
||||
type: types.SET_INITIAL_STORY,
|
||||
storyKindList,
|
||||
};
|
||||
}
|
||||
|
||||
export function setError(error) {
|
||||
return {
|
||||
type: types.SET_ERROR,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
export function clearError() {
|
||||
return {
|
||||
type: types.CLEAR_ERROR,
|
||||
};
|
||||
}
|
||||
|
||||
export function selectStory(kind, story) {
|
||||
return {
|
||||
type: types.SELECT_STORY,
|
||||
kind,
|
||||
story,
|
||||
};
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import { location } from 'global';
|
||||
import { setInitialStory, setError, clearError } from './actions';
|
||||
import { clearDecorators } from './';
|
||||
|
||||
export default class ConfigApi {
|
||||
constructor({ channel, storyStore, reduxStore }) {
|
||||
// channel can be null when running in node
|
||||
// always check whether channel is available
|
||||
this._channel = channel;
|
||||
this._storyStore = storyStore;
|
||||
this._reduxStore = reduxStore;
|
||||
}
|
||||
|
||||
_renderMain(loaders) {
|
||||
if (loaders) loaders();
|
||||
|
||||
const stories = this._storyStore.dumpStoryBook();
|
||||
// send to the parent frame.
|
||||
this._channel.emit('setStories', { stories });
|
||||
|
||||
// clear the error if exists.
|
||||
this._reduxStore.dispatch(clearError());
|
||||
this._reduxStore.dispatch(setInitialStory(stories));
|
||||
}
|
||||
|
||||
_renderError(e) {
|
||||
const { stack, message } = e;
|
||||
const error = { stack, message };
|
||||
this._reduxStore.dispatch(setError(error));
|
||||
}
|
||||
|
||||
configure(loaders, module) {
|
||||
const render = () => {
|
||||
try {
|
||||
this._renderMain(loaders);
|
||||
} catch (error) {
|
||||
if (module.hot && module.hot.status() === 'apply') {
|
||||
// We got this issue, after webpack fixed it and applying it.
|
||||
// Therefore error message is displayed forever even it's being fixed.
|
||||
// So, we'll detect it reload the page.
|
||||
location.reload();
|
||||
} else {
|
||||
// If we are accessing the site, but the error is not fixed yet.
|
||||
// There we can render the error.
|
||||
this._renderError(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept(() => {
|
||||
setTimeout(render);
|
||||
});
|
||||
module.hot.dispose(() => {
|
||||
clearDecorators();
|
||||
});
|
||||
}
|
||||
|
||||
if (this._channel) {
|
||||
render();
|
||||
} else {
|
||||
loaders();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,13 +4,9 @@ import { createStore } from 'redux';
|
||||
import addons from '@storybook/addons';
|
||||
import createChannel from '@storybook/channel-postmessage';
|
||||
import qs from 'qs';
|
||||
import { StoryStore } from '@storybook/core/client';
|
||||
import ClientApi from './client_api';
|
||||
import ConfigApi from './config_api';
|
||||
import render from './render';
|
||||
import { StoryStore, ClientApi, ConfigApi, Actions, reducer } from '@storybook/core/client';
|
||||
import init from './init';
|
||||
import { selectStory } from './actions';
|
||||
import reducer from './reducer';
|
||||
import render from './render';
|
||||
|
||||
// check whether we're running on node/browser
|
||||
const { navigator } = global;
|
||||
@ -27,7 +23,7 @@ if (isBrowser) {
|
||||
const queryParams = qs.parse(window.location.search.substring(1));
|
||||
const channel = createChannel({ page: 'preview' });
|
||||
channel.on('setCurrentStory', data => {
|
||||
reduxStore.dispatch(selectStory(data.kind, data.story));
|
||||
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
|
||||
});
|
||||
Object.assign(context, { channel, window, queryParams });
|
||||
addons.setChannel(channel);
|
||||
@ -35,14 +31,13 @@ if (isBrowser) {
|
||||
}
|
||||
|
||||
const clientApi = new ClientApi(context);
|
||||
const configApi = new ConfigApi(context);
|
||||
|
||||
// do exports
|
||||
export const storiesOf = clientApi.storiesOf.bind(clientApi);
|
||||
export const setAddon = clientApi.setAddon.bind(clientApi);
|
||||
export const addDecorator = clientApi.addDecorator.bind(clientApi);
|
||||
export const clearDecorators = clientApi.clearDecorators.bind(clientApi);
|
||||
export const getStorybook = clientApi.getStorybook.bind(clientApi);
|
||||
|
||||
const configApi = new ConfigApi({ clearDecorators, ...context });
|
||||
export const configure = configApi.configure.bind(configApi);
|
||||
|
||||
// initialize the UI
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import keyEvents from '@storybook/ui/dist/libs/key_events';
|
||||
import { selectStory } from './actions';
|
||||
import { Actions } from '@storybook/core/client';
|
||||
|
||||
export default function(context) {
|
||||
const { queryParams, reduxStore, window, channel } = context;
|
||||
// set the story if correct params are loaded via the URL.
|
||||
if (queryParams.selectedKind) {
|
||||
reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
|
||||
reduxStore.dispatch(Actions.selectStory(queryParams.selectedKind, queryParams.selectedStory));
|
||||
}
|
||||
|
||||
// Handle keyEvents and pass them to the parent.
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
import { types } from './actions';
|
||||
|
||||
export default function reducer(state = {}, action) {
|
||||
switch (action.type) {
|
||||
case types.CLEAR_ERROR: {
|
||||
return {
|
||||
...state,
|
||||
error: null,
|
||||
};
|
||||
}
|
||||
|
||||
case types.SET_ERROR: {
|
||||
return {
|
||||
...state,
|
||||
error: action.error,
|
||||
};
|
||||
}
|
||||
|
||||
case types.SELECT_STORY: {
|
||||
return {
|
||||
...state,
|
||||
selectedKind: action.kind,
|
||||
selectedStory: action.story,
|
||||
};
|
||||
}
|
||||
|
||||
case types.SET_INITIAL_STORY: {
|
||||
const newState = { ...state };
|
||||
const { storyKindList } = action;
|
||||
if (!newState.selectedKind && storyKindList.length > 0) {
|
||||
newState.selectedKind = storyKindList[0].kind;
|
||||
newState.selectedStory = storyKindList[0].stories[0];
|
||||
}
|
||||
return newState;
|
||||
}
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
export const types = {
|
||||
SET_ERROR: 'PREVIEW_SET_ERROR',
|
||||
CLEAR_ERROR: 'PREVIEW_CLEAR_ERROR',
|
||||
SELECT_STORY: 'PREVIEW_SELECT_STORY',
|
||||
SET_INITIAL_STORY: 'PREVIEW_SET_INITIAL_STORY',
|
||||
};
|
||||
|
||||
export function setInitialStory(storyKindList) {
|
||||
return {
|
||||
type: types.SET_INITIAL_STORY,
|
||||
storyKindList,
|
||||
};
|
||||
}
|
||||
|
||||
export function setError(error) {
|
||||
return {
|
||||
type: types.SET_ERROR,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
export function clearError() {
|
||||
return {
|
||||
type: types.CLEAR_ERROR,
|
||||
};
|
||||
}
|
||||
|
||||
export function selectStory(kind, story) {
|
||||
return {
|
||||
type: types.SELECT_STORY,
|
||||
kind,
|
||||
story,
|
||||
};
|
||||
}
|
||||
@ -1,119 +0,0 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
export default class ClientApi {
|
||||
constructor({ channel, storyStore }) {
|
||||
// channel can be null when running in node
|
||||
// always check whether channel is available
|
||||
this._channel = channel;
|
||||
this._storyStore = storyStore;
|
||||
this._addons = {};
|
||||
this._globalDecorators = [];
|
||||
}
|
||||
|
||||
setAddon(addon) {
|
||||
this._addons = {
|
||||
...this._addons,
|
||||
...addon,
|
||||
};
|
||||
}
|
||||
|
||||
addDecorator(decorator) {
|
||||
this._globalDecorators.push(decorator);
|
||||
}
|
||||
|
||||
clearDecorators() {
|
||||
this._globalDecorators = [];
|
||||
}
|
||||
|
||||
storiesOf(kind, m) {
|
||||
if (!kind && typeof kind !== 'string') {
|
||||
throw new Error('Invalid or missing kind provided for stories, should be a string');
|
||||
}
|
||||
|
||||
if (!m) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(
|
||||
`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`
|
||||
);
|
||||
}
|
||||
|
||||
if (m && m.hot) {
|
||||
m.hot.dispose(() => {
|
||||
this._storyStore.removeStoryKind(kind);
|
||||
});
|
||||
}
|
||||
|
||||
const localDecorators = [];
|
||||
const api = {
|
||||
kind,
|
||||
};
|
||||
|
||||
// apply addons
|
||||
Object.keys(this._addons).forEach(name => {
|
||||
const addon = this._addons[name];
|
||||
api[name] = (...args) => {
|
||||
addon.apply(api, args);
|
||||
return api;
|
||||
};
|
||||
});
|
||||
|
||||
const createWrapperComponent = Target => ({
|
||||
functional: true,
|
||||
render(h, c) {
|
||||
return h(Target, c.data, c.children);
|
||||
},
|
||||
});
|
||||
|
||||
api.add = (storyName, getStory) => {
|
||||
if (typeof storyName !== 'string') {
|
||||
throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
|
||||
}
|
||||
|
||||
if (this._storyStore.hasStory(kind, storyName)) {
|
||||
throw new Error(`Story of "${kind}" named "${storyName}" already exists`);
|
||||
}
|
||||
|
||||
// Wrap the getStory function with each decorator. The first
|
||||
// decorator will wrap the story function. The second will
|
||||
// wrap the first decorator and so on.
|
||||
const decorators = [...localDecorators, ...this._globalDecorators];
|
||||
|
||||
const getDecoratedStory = decorators.reduce(
|
||||
(decorated, decorator) => context => {
|
||||
const story = () => decorated(context);
|
||||
const decoratedStory = decorator(story, context);
|
||||
decoratedStory.components = decoratedStory.components || {};
|
||||
decoratedStory.components.story = createWrapperComponent(story());
|
||||
return decoratedStory;
|
||||
},
|
||||
getStory
|
||||
);
|
||||
|
||||
const fileName = m ? m.filename : null;
|
||||
|
||||
// Add the fully decorated getStory function.
|
||||
this._storyStore.addStory(kind, storyName, getDecoratedStory, fileName);
|
||||
return api;
|
||||
};
|
||||
|
||||
api.addDecorator = decorator => {
|
||||
localDecorators.push(decorator);
|
||||
return api;
|
||||
};
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
getStorybook() {
|
||||
return this._storyStore.getStoryKinds().map(kind => {
|
||||
const fileName = this._storyStore.getStoryFileName(kind);
|
||||
|
||||
const stories = this._storyStore.getStories(kind).map(name => {
|
||||
const render = this._storyStore.getStory(kind, name);
|
||||
return { name, render };
|
||||
});
|
||||
|
||||
return { kind, fileName, stories };
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,295 +0,0 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
import ClientAPI from './client_api';
|
||||
|
||||
class StoryStore {
|
||||
constructor() {
|
||||
this.stories = [];
|
||||
}
|
||||
|
||||
addStory(kind, story, fn, fileName) {
|
||||
this.stories.push({ kind, story, fn, fileName });
|
||||
}
|
||||
|
||||
getStoryKinds() {
|
||||
return this.stories.reduce((kinds, info) => {
|
||||
if (kinds.indexOf(info.kind) === -1) {
|
||||
kinds.push(info.kind);
|
||||
}
|
||||
return kinds;
|
||||
}, []);
|
||||
}
|
||||
|
||||
getStories(kind) {
|
||||
return this.stories.reduce((stories, info) => {
|
||||
if (info.kind === kind) {
|
||||
stories.push(info.story);
|
||||
}
|
||||
return stories;
|
||||
}, []);
|
||||
}
|
||||
|
||||
getStoryFileName(kind) {
|
||||
const story = this.stories.find(info => info.kind === kind);
|
||||
return story ? story.fileName : null;
|
||||
}
|
||||
|
||||
getStory(kind, name) {
|
||||
return this.stories.reduce((fn, info) => {
|
||||
if (!fn && info.kind === kind && info.story === name) {
|
||||
return info.fn;
|
||||
}
|
||||
return fn;
|
||||
}, null);
|
||||
}
|
||||
|
||||
hasStory(kind, name) {
|
||||
return Boolean(this.getStory(kind, name));
|
||||
}
|
||||
}
|
||||
|
||||
describe('preview.client_api', () => {
|
||||
describe('setAddon', () => {
|
||||
it('should register addons', () => {
|
||||
const api = new ClientAPI({});
|
||||
let data;
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data = 'foo';
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none', module).aa();
|
||||
expect(data).toBe('foo');
|
||||
});
|
||||
|
||||
it('should not remove previous addons', () => {
|
||||
const api = new ClientAPI({});
|
||||
const data = [];
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data.push('foo');
|
||||
},
|
||||
});
|
||||
|
||||
api.setAddon({
|
||||
bb() {
|
||||
data.push('bar');
|
||||
},
|
||||
});
|
||||
|
||||
api
|
||||
.storiesOf('none', module)
|
||||
.aa()
|
||||
.bb();
|
||||
expect(data).toEqual(['foo', 'bar']);
|
||||
});
|
||||
|
||||
it('should call with the api context', () => {
|
||||
const api = new ClientAPI({});
|
||||
let data;
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data = typeof this.add;
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none', module).aa();
|
||||
expect(data).toBe('function');
|
||||
});
|
||||
|
||||
it('should be able to access addons added previously', () => {
|
||||
const api = new ClientAPI({});
|
||||
let data;
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data = 'foo';
|
||||
},
|
||||
});
|
||||
|
||||
api.setAddon({
|
||||
bb() {
|
||||
this.aa();
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf('none', module).bb();
|
||||
expect(data).toBe('foo');
|
||||
});
|
||||
|
||||
it('should be able to access the current kind', () => {
|
||||
const api = new ClientAPI({});
|
||||
const kind = 'dfdwf3e3';
|
||||
let data;
|
||||
|
||||
api.setAddon({
|
||||
aa() {
|
||||
data = this.kind;
|
||||
},
|
||||
});
|
||||
|
||||
api.storiesOf(kind, module).aa();
|
||||
expect(data).toBe(kind);
|
||||
});
|
||||
});
|
||||
|
||||
describe('addDecorator', () => {
|
||||
it('should add local decorators', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
|
||||
|
||||
localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
|
||||
expect(storyStore.stories[0].fn().template).toBe('<div>aa<p>hello</p></div>');
|
||||
});
|
||||
|
||||
it('should add global decorators', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
api.addDecorator(fn => ({ template: `<div>bb${fn().template}</div>` }));
|
||||
const localApi = api.storiesOf('none', module);
|
||||
|
||||
localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
|
||||
expect(storyStore.stories[0].fn().template).toBe('<div>bb<p>hello</p></div>');
|
||||
});
|
||||
|
||||
it('should utilize both decorators at once', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none', module);
|
||||
|
||||
api.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
|
||||
localApi.addDecorator(fn => ({ template: `<div>bb${fn().template}</div>` }));
|
||||
|
||||
localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
|
||||
expect(storyStore.stories[0].fn().template).toBe('<div>aa<div>bb<p>hello</p></div></div>');
|
||||
});
|
||||
|
||||
it('should pass the context', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator(fn => ({ template: `<div>aa${fn().template}</div>` }));
|
||||
|
||||
localApi.add('storyName', ({ kind, story }) => ({ template: `<p>${kind}-${story}</p>` }));
|
||||
|
||||
const kind = 'dfdfd';
|
||||
const story = 'ef349ff';
|
||||
|
||||
const result = storyStore.stories[0].fn({ kind, story });
|
||||
expect(result.template).toBe(`<div>aa<p>${kind}-${story}</p></div>`);
|
||||
});
|
||||
|
||||
it('should have access to the context', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const localApi = api.storiesOf('none', module);
|
||||
localApi.addDecorator((fn, { kind, story }) => ({
|
||||
template: `<div>${kind}-${story}-${fn().template}</div>`,
|
||||
}));
|
||||
|
||||
localApi.add('storyName', () => ({ template: '<p>hello</p>' }));
|
||||
|
||||
const kind = 'dfdfd';
|
||||
const story = 'ef349ff';
|
||||
|
||||
const result = storyStore.stories[0].fn({ kind, story });
|
||||
expect(result.template).toBe(`<div>${kind}-${story}-<p>hello</p></div>`);
|
||||
});
|
||||
});
|
||||
|
||||
describe('clearDecorators', () => {
|
||||
it('should remove all global decorators', () => {
|
||||
const api = new ClientAPI({});
|
||||
api._globalDecorators = 1234;
|
||||
api.clearDecorators();
|
||||
expect(api._globalDecorators).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getStorybook', () => {
|
||||
it('should return storybook when empty', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const book = api.getStorybook();
|
||||
expect(book).toEqual([]);
|
||||
});
|
||||
|
||||
it('should return storybook with stories', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const functions = {
|
||||
'story-1.1': () => 'story-1.1',
|
||||
'story-1.2': () => 'story-1.2',
|
||||
'story-2.1': () => 'story-2.1',
|
||||
'story-2.2': () => 'story-2.2',
|
||||
};
|
||||
const kind1 = api.storiesOf('kind-1', { filename: 'kind1.js' });
|
||||
kind1.add('story-1.1', functions['story-1.1']);
|
||||
kind1.add('story-1.2', functions['story-1.2']);
|
||||
const kind2 = api.storiesOf('kind-2', { filename: 'kind2.js' });
|
||||
kind2.add('story-2.1', functions['story-2.1']);
|
||||
kind2.add('story-2.2', functions['story-2.2']);
|
||||
const book = api.getStorybook();
|
||||
expect(book).toEqual([
|
||||
{
|
||||
kind: 'kind-1',
|
||||
fileName: 'kind1.js',
|
||||
stories: [
|
||||
{ name: 'story-1.1', render: functions['story-1.1'] },
|
||||
{ name: 'story-1.2', render: functions['story-1.2'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
kind: 'kind-2',
|
||||
fileName: 'kind2.js',
|
||||
stories: [
|
||||
{ name: 'story-2.1', render: functions['story-2.1'] },
|
||||
{ name: 'story-2.2', render: functions['story-2.2'] },
|
||||
],
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return storybook with file names when module with file name provided', () => {
|
||||
const storyStore = new StoryStore();
|
||||
const api = new ClientAPI({ storyStore });
|
||||
const functions = {
|
||||
'story-1.1': () => 'story-1.1',
|
||||
'story-1.2': () => 'story-1.2',
|
||||
'story-2.1': () => 'story-2.1',
|
||||
'story-2.2': () => 'story-2.2',
|
||||
};
|
||||
const kind1 = api.storiesOf('kind-1', { filename: 'foo' });
|
||||
kind1.add('story-1.1', functions['story-1.1']);
|
||||
kind1.add('story-1.2', functions['story-1.2']);
|
||||
const kind2 = api.storiesOf('kind-2', { filename: 'bar' });
|
||||
kind2.add('story-2.1', functions['story-2.1']);
|
||||
kind2.add('story-2.2', functions['story-2.2']);
|
||||
const book = api.getStorybook();
|
||||
expect(book).toEqual([
|
||||
{
|
||||
kind: 'kind-1',
|
||||
fileName: 'foo',
|
||||
stories: [
|
||||
{ name: 'story-1.1', render: functions['story-1.1'] },
|
||||
{ name: 'story-1.2', render: functions['story-1.2'] },
|
||||
],
|
||||
},
|
||||
{
|
||||
kind: 'kind-2',
|
||||
fileName: 'bar',
|
||||
stories: [
|
||||
{ name: 'story-2.1', render: functions['story-2.1'] },
|
||||
{ name: 'story-2.2', render: functions['story-2.2'] },
|
||||
],
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -4,13 +4,9 @@ import { createStore } from 'redux';
|
||||
import addons from '@storybook/addons';
|
||||
import createChannel from '@storybook/channel-postmessage';
|
||||
import qs from 'qs';
|
||||
import { StoryStore } from '@storybook/core/client';
|
||||
import ClientApi from './client_api';
|
||||
import ConfigApi from './config_api';
|
||||
import render from './render';
|
||||
import { StoryStore, ClientApi, ConfigApi, Actions, reducer } from '@storybook/core/client';
|
||||
import init from './init';
|
||||
import { selectStory } from './actions';
|
||||
import reducer from './reducer';
|
||||
import render from './render';
|
||||
|
||||
// check whether we're running on node/browser
|
||||
const { navigator } = global;
|
||||
@ -21,13 +17,31 @@ const isBrowser =
|
||||
|
||||
const storyStore = new StoryStore();
|
||||
const reduxStore = createStore(reducer);
|
||||
const context = { storyStore, reduxStore };
|
||||
|
||||
const createWrapperComponent = Target => ({
|
||||
functional: true,
|
||||
render(h, c) {
|
||||
return h(Target, c.data, c.children);
|
||||
},
|
||||
});
|
||||
const decorateStory = (getStory, decorators) =>
|
||||
decorators.reduce(
|
||||
(decorated, decorator) => context => {
|
||||
const story = () => decorated(context);
|
||||
const decoratedStory = decorator(story, context);
|
||||
decoratedStory.components = decoratedStory.components || {};
|
||||
decoratedStory.components.story = createWrapperComponent(story());
|
||||
return decoratedStory;
|
||||
},
|
||||
getStory
|
||||
);
|
||||
const context = { storyStore, reduxStore, decorateStory };
|
||||
|
||||
if (isBrowser) {
|
||||
const queryParams = qs.parse(window.location.search.substring(1));
|
||||
const channel = createChannel({ page: 'preview' });
|
||||
channel.on('setCurrentStory', data => {
|
||||
reduxStore.dispatch(selectStory(data.kind, data.story));
|
||||
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
|
||||
});
|
||||
Object.assign(context, { channel, window, queryParams });
|
||||
addons.setChannel(channel);
|
||||
@ -35,7 +49,6 @@ if (isBrowser) {
|
||||
}
|
||||
|
||||
const clientApi = new ClientApi(context);
|
||||
const configApi = new ConfigApi(context);
|
||||
|
||||
// do exports
|
||||
export const storiesOf = clientApi.storiesOf.bind(clientApi);
|
||||
@ -43,6 +56,8 @@ export const setAddon = clientApi.setAddon.bind(clientApi);
|
||||
export const addDecorator = clientApi.addDecorator.bind(clientApi);
|
||||
export const clearDecorators = clientApi.clearDecorators.bind(clientApi);
|
||||
export const getStorybook = clientApi.getStorybook.bind(clientApi);
|
||||
|
||||
const configApi = new ConfigApi({ ...context, clearDecorators });
|
||||
export const configure = configApi.configure.bind(configApi);
|
||||
|
||||
// initialize the UI
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import keyEvents from '@storybook/ui/dist/libs/key_events';
|
||||
import { selectStory } from './actions';
|
||||
import { Actions } from '@storybook/core/client';
|
||||
|
||||
export default function(context) {
|
||||
const { queryParams, reduxStore, window, channel } = context;
|
||||
// set the story if correct params are loaded via the URL.
|
||||
if (queryParams.selectedKind) {
|
||||
reduxStore.dispatch(selectStory(queryParams.selectedKind, queryParams.selectedStory));
|
||||
reduxStore.dispatch(Actions.selectStory(queryParams.selectedKind, queryParams.selectedStory));
|
||||
}
|
||||
|
||||
// Handle keyEvents and pass them to the parent.
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
import { types } from './actions';
|
||||
|
||||
export default function reducer(state = {}, action) {
|
||||
switch (action.type) {
|
||||
case types.CLEAR_ERROR: {
|
||||
return {
|
||||
...state,
|
||||
error: null,
|
||||
};
|
||||
}
|
||||
|
||||
case types.SET_ERROR: {
|
||||
return {
|
||||
...state,
|
||||
error: action.error,
|
||||
};
|
||||
}
|
||||
|
||||
case types.SELECT_STORY: {
|
||||
return {
|
||||
...state,
|
||||
selectedKind: action.kind,
|
||||
selectedStory: action.story,
|
||||
};
|
||||
}
|
||||
|
||||
case types.SET_INITIAL_STORY: {
|
||||
const newState = { ...state };
|
||||
const { storyKindList } = action;
|
||||
if (!newState.selectedKind && storyKindList.length > 0) {
|
||||
newState.selectedKind = storyKindList[0].kind;
|
||||
newState.selectedStory = storyKindList[0].stories[0];
|
||||
}
|
||||
return newState;
|
||||
}
|
||||
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
@ -12,6 +12,7 @@
|
||||
"@storybook/channels": "file:../../packs/storybook-channels.tgz",
|
||||
"@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
|
||||
"@storybook/components": "file:../../packs/storybook-components.tgz",
|
||||
"@storybook/core": "file:../../packs/storybook-core.tgz",
|
||||
"@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
|
||||
"@storybook/ui": "file:../../packs/storybook-ui.tgz",
|
||||
"react-native-scripts": "1.1.0",
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"@storybook/channels": "file:../../packs/storybook-channels.tgz",
|
||||
"@storybook/channel-postmessage": "file:../../packs/storybook-channel-postmessage.tgz",
|
||||
"@storybook/components": "file:../../packs/storybook-components.tgz",
|
||||
"@storybook/core": "file:../../packs/storybook-core.tgz",
|
||||
"@storybook/react-native": "file:../../packs/storybook-react-native.tgz",
|
||||
"@storybook/ui": "file:../../packs/storybook-ui.tgz",
|
||||
"react-dom": "^16.0.0"
|
||||
|
||||
@ -5,7 +5,7 @@ export default glamorous.button(
|
||||
border: '1px solid rgba(0, 0, 0, 0)',
|
||||
font: 'inherit',
|
||||
background: 'none',
|
||||
'box-shadow': 'none',
|
||||
boxShadow: 'none',
|
||||
padding: 0,
|
||||
':hover': {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.05)',
|
||||
|
||||
@ -16,6 +16,9 @@
|
||||
"dev": "DEV_BUILD=1 nodemon --watch ./src --exec 'yarn prepare'",
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"global": "^4.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.26.0"
|
||||
}
|
||||
|
||||
@ -1,13 +1,20 @@
|
||||
/* eslint no-underscore-dangle: 0 */
|
||||
|
||||
const defaultDecorateStory = (getStory, decorators) =>
|
||||
decorators.reduce(
|
||||
(decorated, decorator) => context => decorator(() => decorated(context), context),
|
||||
getStory
|
||||
);
|
||||
|
||||
export default class ClientApi {
|
||||
constructor({ channel, storyStore }) {
|
||||
constructor({ channel, storyStore, decorateStory = defaultDecorateStory }) {
|
||||
// channel can be null when running in node
|
||||
// always check whether channel is available
|
||||
this._channel = channel;
|
||||
this._storyStore = storyStore;
|
||||
this._addons = {};
|
||||
this._globalDecorators = [];
|
||||
this._decorateStory = decorateStory;
|
||||
}
|
||||
|
||||
setAddon(addon) {
|
||||
@ -71,15 +78,15 @@ export default class ClientApi {
|
||||
// wrap the first decorator and so on.
|
||||
const decorators = [...localDecorators, ...this._globalDecorators];
|
||||
|
||||
const fn = decorators.reduce(
|
||||
(decorated, decorator) => context => decorator(() => decorated(context), context),
|
||||
getStory
|
||||
);
|
||||
|
||||
const fileName = m ? m.filename : null;
|
||||
|
||||
// Add the fully decorated getStory function.
|
||||
this._storyStore.addStory(kind, storyName, fn, fileName);
|
||||
this._storyStore.addStory(
|
||||
kind,
|
||||
storyName,
|
||||
this._decorateStory(getStory, decorators),
|
||||
fileName
|
||||
);
|
||||
return api;
|
||||
};
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
|
||||
import { location } from 'global';
|
||||
import { setInitialStory, setError, clearError } from './actions';
|
||||
import { clearDecorators } from './';
|
||||
|
||||
export default class ConfigApi {
|
||||
constructor({ channel, storyStore, reduxStore }) {
|
||||
constructor({ channel, storyStore, reduxStore, clearDecorators }) {
|
||||
// channel can be null when running in node
|
||||
// always check whether channel is available
|
||||
this._channel = channel;
|
||||
this._storyStore = storyStore;
|
||||
this._reduxStore = reduxStore;
|
||||
this._clearDecorators = clearDecorators;
|
||||
}
|
||||
|
||||
_renderMain(loaders) {
|
||||
@ -54,7 +54,7 @@ export default class ConfigApi {
|
||||
setTimeout(render);
|
||||
});
|
||||
module.hot.dispose(() => {
|
||||
clearDecorators();
|
||||
this._clearDecorators();
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
import * as Actions from './actions';
|
||||
import ClientApi from './client_api';
|
||||
import ConfigApi from './config_api';
|
||||
import StoryStore from './story_store';
|
||||
import reducer from './reducer';
|
||||
|
||||
export default { StoryStore };
|
||||
export default { Actions, ClientApi, ConfigApi, StoryStore, reducer };
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user