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

Merge pull request #3259 from storybooks/tmeasday/final-preview-core-refactor

Browse Source 
Refactor all startup code into `@storybook/core` also
This commit is contained in:
Filipp Riabchun 2018-03-22 21:20:43 +03:00 committed by GitHub
commit 90f8f0d263
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 84 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/angular/package.json
View File

@ -49,7 +49,6 @@
"react": "^16.0.0", "react": "^16.0.0",
"react-dev-utils": "^5.0.0", "react-dev-utils": "^5.0.0",
"react-dom": "^16.0.0", "react-dom": "^16.0.0",
"redux": "^3.6.0",
"sass-loader": "^6.0.7", "sass-loader": "^6.0.7",
"ts-loader": "^3.5.0", "ts-loader": "^3.5.0",
"uglifyjs-webpack-plugin": "^1.2.4", "uglifyjs-webpack-plugin": "^1.2.4",

63
app/angular/src/client/preview/index.js vendored
View File

@ -1,30 +1,9 @@
import { window, navigator } from 'global'; import { start } from '@storybook/core/client';
import { createStore } from 'redux';
import addons from '@storybook/addons';
import createChannel from '@storybook/channel-postmessage';
import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
import {
StoryStore,
ClientApi,
ConfigApi,
Actions,
reducer,
syncUrlWithStore,
} from '@storybook/core/client';
import render from './render'; import render from './render';
// check whether we're running on node/browser const { clientApi, configApi, forceReRender } = start(render);
const isBrowser =
navigator &&
navigator.userAgent &&
navigator.userAgent !== 'storyshots' &&
!(navigator.userAgent.indexOf('Node.js') > -1) &&
!(navigator.userAgent.indexOf('jsdom') > -1);
const storyStore = new StoryStore();
const reduxStore = createStore(reducer);
const context = { storyStore, reduxStore };
const clientApi = new ClientApi(context);
export const { export const {
storiesOf, storiesOf,
setAddon, setAddon,
@ -34,39 +13,5 @@ export const {
getStorybook, getStorybook,
} = clientApi; } = clientApi;
let channel;
if (isBrowser) {
// create preview channel
channel = createChannel({ page: 'preview' });
channel.on('setCurrentStory', data => {
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
});
addons.setChannel(channel);
Object.assign(context, { channel });
syncUrlWithStore(reduxStore);
// Handle keyboard shortcuts
window.onkeydown = handleKeyboardShortcuts(channel);
}
// Provide access to external scripts if `window` is defined.
// NOTE this is different to isBrowser, primarily for the JSDOM use case
if (typeof window !== 'undefined') {
window.__STORYBOOK_CLIENT_API__ = clientApi;
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
const configApi = new ConfigApi({ ...context, clearDecorators });
export const { configure } = configApi; export const { configure } = configApi;
export { forceReRender };
// initialize the UI
const renderUI = () => {
if (isBrowser) {
render(context);
}
};
reduxStore.subscribe(renderUI);
export const forceReRender = () => render(context, true);

1
app/polymer/package.json
View File

@ -51,7 +51,6 @@
"react": "^16.0.0", "react": "^16.0.0",
"react-dev-utils": "^5.0.0", "react-dev-utils": "^5.0.0",
"react-dom": "^16.0.0", "react-dom": "^16.0.0",
"redux": "^3.7.2",
"uglifyjs-webpack-plugin": "^1.2.4", "uglifyjs-webpack-plugin": "^1.2.4",
"util-deprecate": "^1.0.2", "util-deprecate": "^1.0.2",
"webpack": "^3.11.0", "webpack": "^3.11.0",

63
app/polymer/src/client/preview/index.js
View File

@ -1,32 +1,9 @@
import { createStore } from 'redux'; import { start } from '@storybook/core/client';
import addons from '@storybook/addons';
import { navigator, window } from 'global';
import createChannel from '@storybook/channel-postmessage';
import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
import {
StoryStore,
ClientApi,
ConfigApi,
Actions,
reducer,
syncUrlWithStore,
} from '@storybook/core/client';
import render from './render'; import render from './render';
// check whether we're running on node/browser const { clientApi, configApi, forceReRender } = start(render);
const isBrowser =
navigator &&
navigator.userAgent &&
navigator.userAgent !== 'storyshots' &&
!(navigator.userAgent.indexOf('Node.js') > -1) &&
!(navigator.userAgent.indexOf('jsdom') > -1);
const storyStore = new StoryStore();
const reduxStore = createStore(reducer);
const context = { storyStore, reduxStore };
const clientApi = new ClientApi(context);
export const { export const {
storiesOf, storiesOf,
setAddon, setAddon,
@ -36,39 +13,5 @@ export const {
getStorybook, getStorybook,
} = clientApi; } = clientApi;
let channel;
if (isBrowser) {
// setup preview channel
channel = createChannel({ page: 'preview' });
channel.on('setCurrentStory', data => {
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
});
addons.setChannel(channel);
Object.assign(context, { channel });
syncUrlWithStore(reduxStore);
// Handle keyboard shortcuts
window.onkeydown = handleKeyboardShortcuts(channel);
}
// Provide access to external scripts if `window` is defined.
// NOTE this is different to isBrowser, primarily for the JSDOM use case
if (typeof window !== 'undefined') {
window.__STORYBOOK_CLIENT_API__ = clientApi;
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
const configApi = new ConfigApi({ clearDecorators, ...context });
export const { configure } = configApi; export const { configure } = configApi;
export { forceReRender };
// initialize the UI
const renderUI = () => {
if (isBrowser) {
render(context);
}
};
reduxStore.subscribe(renderUI);
export const forceReRender = () => render(context, true);

1
app/react/package.json
View File

@ -57,7 +57,6 @@
"markdown-loader": "^2.0.2", "markdown-loader": "^2.0.2",
"prop-types": "^15.6.1", "prop-types": "^15.6.1",
"react-dev-utils": "^5.0.0", "react-dev-utils": "^5.0.0",
"redux": "^3.7.2",
"uglifyjs-webpack-plugin": "^1.2.4", "uglifyjs-webpack-plugin": "^1.2.4",
"util-deprecate": "^1.0.2", "util-deprecate": "^1.0.2",
"webpack": "^3.11.0", "webpack": "^3.11.0",

63
app/react/src/client/preview/index.js
View File

@ -1,32 +1,9 @@
import { createStore } from 'redux'; import { start } from '@storybook/core/client';
import addons from '@storybook/addons';
import { navigator, window } from 'global';
import createChannel from '@storybook/channel-postmessage';
import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
import {
StoryStore,
ClientApi,
ConfigApi,
Actions,
reducer,
syncUrlWithStore,
} from '@storybook/core/client';
import render from './render'; import render from './render';
// check whether we're running on node/browser const { clientApi, configApi, forceReRender } = start(render);
const isBrowser =
navigator &&
navigator.userAgent &&
navigator.userAgent !== 'storyshots' &&
!(navigator.userAgent.indexOf('Node.js') > -1) &&
!(navigator.userAgent.indexOf('jsdom') > -1);
const storyStore = new StoryStore();
const reduxStore = createStore(reducer);
const context = { storyStore, reduxStore };
const clientApi = new ClientApi(context);
export const { export const {
storiesOf, storiesOf,
setAddon, setAddon,
@ -36,39 +13,5 @@ export const {
getStorybook, getStorybook,
} = clientApi; } = clientApi;
let channel;
if (isBrowser) {
// setup preview channel
channel = createChannel({ page: 'preview' });
channel.on('setCurrentStory', data => {
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
});
addons.setChannel(channel);
Object.assign(context, { channel });
syncUrlWithStore(reduxStore);
// Handle keyboard shortcuts
window.onkeydown = handleKeyboardShortcuts(channel);
}
// Provide access to external scripts if `window` is defined.
// NOTE this is different to isBrowser, primarily for the JSDOM use case
if (typeof window !== 'undefined') {
window.__STORYBOOK_CLIENT_API__ = clientApi;
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
const configApi = new ConfigApi({ clearDecorators, ...context });
export const { configure } = configApi; export const { configure } = configApi;
export { forceReRender };
// initialize the UI
const renderUI = () => {
if (isBrowser) {
render(context);
}
};
reduxStore.subscribe(renderUI);
export const forceReRender = () => render(context, true);

1
app/vue/package.json
View File

@ -49,7 +49,6 @@
"react": "^16.2.0", "react": "^16.2.0",
"react-dev-utils": "^5.0.0", "react-dev-utils": "^5.0.0",
"react-dom": "^16.2.0", "react-dom": "^16.2.0",
"redux": "^3.7.2",
"uglifyjs-webpack-plugin": "^1.2.4", "uglifyjs-webpack-plugin": "^1.2.4",
"util-deprecate": "^1.0.2", "util-deprecate": "^1.0.2",
"webpack": "^3.11.0", "webpack": "^3.11.0",

66
app/vue/src/client/preview/index.js
View File

@ -1,30 +1,7 @@
import { createStore } from 'redux'; import { start } from '@storybook/core/client';
import addons from '@storybook/addons';
import createChannel from '@storybook/channel-postmessage';
import { navigator, window } from 'global';
import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
import {
StoryStore,
ClientApi,
ConfigApi,
Actions,
reducer,
syncUrlWithStore,
} from '@storybook/core/client';
import render from './render'; import render from './render';
// check whether we're running on node/browser
const isBrowser =
navigator &&
navigator.userAgent &&
navigator.userAgent !== 'storyshots' &&
!(navigator.userAgent.indexOf('Node.js') > -1) &&
!(navigator.userAgent.indexOf('jsdom') > -1);
const storyStore = new StoryStore();
const reduxStore = createStore(reducer);
const createWrapperComponent = Target => ({ const createWrapperComponent = Target => ({
functional: true, functional: true,
render(h, c) { render(h, c) {
@ -42,8 +19,9 @@ const decorateStory = (getStory, decorators) =>
}, },
getStory getStory
); );
const context = { storyStore, reduxStore, decorateStory };
const clientApi = new ClientApi(context); const { clientApi, configApi, forceReRender } = start(render, { decorateStory });
export const { export const {
storiesOf, storiesOf,
setAddon, setAddon,
@ -53,39 +31,5 @@ export const {
getStorybook, getStorybook,
} = clientApi; } = clientApi;
let channel;
if (isBrowser) {
// create preview channel
channel = createChannel({ page: 'preview' });
channel.on('setCurrentStory', data => {
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
});
addons.setChannel(channel);
Object.assign(context, { channel });
syncUrlWithStore(reduxStore);
// Handle keyboard shortcuts
window.onkeydown = handleKeyboardShortcuts(channel);
}
// Provide access to external scripts if `window` is defined.
// NOTE this is different to isBrowser, primarily for the JSDOM use case
if (typeof window !== 'undefined') {
window.__STORYBOOK_CLIENT_API__ = clientApi;
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
const configApi = new ConfigApi({ ...context, clearDecorators });
export const { configure } = configApi; export const { configure } = configApi;
export { forceReRender };
// initialize the UI
const renderUI = () => {
if (isBrowser) {
render(context);
}
};
reduxStore.subscribe(renderUI);
export const forceReRender = () => render(context, true);

1
lib/core/package.json
View File

@ -39,6 +39,7 @@
"qs": "^6.5.1", "qs": "^6.5.1",
"react": "^16.0.0", "react": "^16.0.0",
"react-dom": "^16.0.0", "react-dom": "^16.0.0",
"redux": "^3.7.2",
"serve-favicon": "^2.4.5", "serve-favicon": "^2.4.5",
"shelljs": "^0.8.1", "shelljs": "^0.8.1",
"style-loader": "^0.20.3", "style-loader": "^0.20.3",

3
lib/core/src/client/preview/index.js
View File

@ -1,3 +1,4 @@
import start from './start';
import * as Actions from './actions'; import * as Actions from './actions';
import ClientApi from './client_api'; import ClientApi from './client_api';
import ConfigApi from './config_api'; import ConfigApi from './config_api';
@ -5,4 +6,4 @@ import StoryStore from './story_store';
import reducer from './reducer'; import reducer from './reducer';
import syncUrlWithStore from './syncUrlWithStore'; import syncUrlWithStore from './syncUrlWithStore';
export default { Actions, ClientApi, ConfigApi, StoryStore, reducer, syncUrlWithStore }; export default { start, Actions, ClientApi, ConfigApi, StoryStore, reducer, syncUrlWithStore };

65
lib/core/src/client/preview/start.js Normal file
View File

@ -0,0 +1,65 @@
import { createStore } from 'redux';
import addons from '@storybook/addons';
import { navigator, window } from 'global';
import createChannel from '@storybook/channel-postmessage';
import { handleKeyboardShortcuts } from '@storybook/ui/dist/libs/key_events';
import StoryStore from './story_store';
import ClientApi from './client_api';
import ConfigApi from './config_api';
import reducer from './reducer';
import * as Actions from './actions';
import syncUrlWithStore from './syncUrlWithStore';
export default function start(render, { decorateStory } = {}) {
// check whether we're running on node/browser
const isBrowser =
navigator &&
navigator.userAgent &&
navigator.userAgent !== 'storyshots' &&
!(navigator.userAgent.indexOf('Node.js') > -1) &&
!(navigator.userAgent.indexOf('jsdom') > -1);
const storyStore = new StoryStore();
const reduxStore = createStore(reducer);
const context = { storyStore, reduxStore, decorateStory };
const clientApi = new ClientApi(context);
let channel;
if (isBrowser) {
// setup preview channel
channel = createChannel({ page: 'preview' });
channel.on('setCurrentStory', data => {
reduxStore.dispatch(Actions.selectStory(data.kind, data.story));
});
addons.setChannel(channel);
Object.assign(context, { channel });
syncUrlWithStore(reduxStore);
// Handle keyboard shortcuts
window.onkeydown = handleKeyboardShortcuts(channel);
}
// Provide access to external scripts if `window` is defined.
// NOTE this is different to isBrowser, primarily for the JSDOM use case
if (typeof window !== 'undefined') {
window.__STORYBOOK_CLIENT_API__ = clientApi;
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
const { clearDecorators } = clientApi;
const configApi = new ConfigApi({ clearDecorators, ...context });
// initialize the UI
const renderUI = () => {
if (isBrowser) {
render(context);
}
};
reduxStore.subscribe(renderUI);
return { context, clientApi, configApi, forceReRender: () => render(context, true) };
}

2
yarn.lock
View File

@ -13395,7 +13395,7 @@ reduce-function-call@^1.0.1:
dependencies: dependencies:
balanced-match "^0.4.2" balanced-match "^0.4.2"
redux@^3.6.0, redux@^3.7.2: redux@^3.7.2:
version "3.7.2" version "3.7.2"
resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b" resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
dependencies: dependencies: