GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-28 05:10:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Module story format & framework param

Browse Source
This commit is contained in:
Michael Shilman 2019-06-17 19:04:51 +08:00
parent 6389e30fce
commit 711c8397f0
25 changed files with 132 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/angular/src/client/index.js vendored
View File

@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
export { moduleMetadata } from './preview/angular/decorators';

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

@ -6,14 +6,18 @@ import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
clearDecorators,
getStorybook,
raw,
load: coreLoad,
} = clientApi;
const framework = 'angular';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

1
app/ember/src/client/index.js
View File

@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

7
app/ember/src/client/preview/index.js
View File

@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
const framework = 'ember';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

1
app/html/src/client/index.js
View File

@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

7
app/html/src/client/preview/index.js
View File

@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
const framework = 'html';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

1
app/marko/src/client/index.js
View File

@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

7
app/marko/src/client/preview/index.js
View File

@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
const framework = 'marko';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

1
app/mithril/src/client/index.js
View File

@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

7
app/mithril/src/client/preview/index.js
View File

@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
const framework = 'mithril';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

1
app/polymer/src/client/index.js
View File

@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

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

@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
const framework = 'polymer';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

1
app/preact/src/client/index.js
View File

@ -7,4 +7,5 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';

7
app/preact/src/client/preview/index.js
View File

@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
const framework = 'preact';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

5
app/react-native/src/index.ts
View File

@ -2,7 +2,7 @@ import Preview from './preview';
const preview = new Preview();
export const storiesOf = preview.api().storiesOf.bind(preview);
const rawStoriesOf = preview.api().storiesOf.bind(preview);
export const setAddon = preview.api().setAddon.bind(preview);
export const addDecorator = preview.api().addDecorator.bind(preview);
export const addParameters = preview.api().addParameters.bind(preview);
@ -11,3 +11,6 @@ export const configure = preview.configure;
export const getStorybook = preview.api().getStorybook.bind(preview);
export const getStorybookUI = preview.getStorybookUI;
export const raw = preview.api().raw.bind(preview);
export const storiesOf = (...args: any[]) =>
rawStoriesOf(...args).addParameters({ framework: 'react-native' });

1
app/react/src/client/index.js
View File

@ -7,6 +7,7 @@ export {
getStorybook,
raw,
forceReRender,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

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

@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
const framework = 'react';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

1
app/riot/src/client/index.js
View File

@ -12,6 +12,7 @@ export {
compileNow,
asCompiledCode,
raw,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

7
app/riot/src/client/preview/index.js
View File

@ -5,10 +5,9 @@ import riot, { tag2, mount as vendorMount } from 'riot';
import render from './render';
import { compileNow as unboundCompileNow, asCompiledCode } from './compileStageFunctions';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -17,6 +16,10 @@ export const {
raw,
} = clientApi;
const framework = 'riot';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
const mount = vendorMount.bind(riot, '#root');
const compileNow = unboundCompileNow.bind(null, tag2);

1
app/svelte/src/client/index.js
View File

@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

7
app/svelte/src/client/preview/index.js
View File

@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
import './globals';
import render from './render';
const { clientApi, configApi, forceReRender } = start(render);
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -15,5 +14,9 @@ export const {
raw,
} = clientApi;
const framework = 'svelte';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

1
app/vue/src/client/index.js
View File

@ -7,6 +7,7 @@ export {
getStorybook,
forceReRender,
raw,
load,
} from './preview';
if (module && module.hot && module.hot.decline) {

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

@ -70,10 +70,9 @@ function decorateStory(getStory, decorators) {
);
}
const { clientApi, configApi, forceReRender } = start(render, { decorateStory });
const { load: coreLoad, clientApi, configApi, forceReRender } = start(render, { decorateStory });
export const {
storiesOf,
setAddon,
addDecorator,
addParameters,
@ -82,5 +81,9 @@ export const {
raw,
} = clientApi;
const framework = 'vue';
export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
export const load = (...args) => coreLoad(...args, framework);
export const { configure } = configApi;
export { forceReRender };

77
examples/official-storybook/config.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
import { load, addDecorator, addParameters } from '@storybook/react';
import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
import { withCssResources } from '@storybook/addon-cssresources';
@ -58,75 +58,6 @@ addParameters({
],
});
let previousExports = {};
if (module && module.hot && module.hot.dispose) {
({ previousExports = {} } = module.hot.data || {});
module.hot.dispose(data => {
// eslint-disable-next-line no-param-reassign
data.previousExports = previousExports;
});
}
// The simplest version of examples would just export this function for users to use
function importAll(context) {
const storyStore = window.__STORYBOOK_CLIENT_API__._storyStore; // eslint-disable-line no-undef, no-underscore-dangle
context.keys().forEach(filename => {
const fileExports = context(filename);
// A old-style story file
if (!fileExports.default) {
return;
}
const { default: component, ...examples } = fileExports;
let componentOptions = component;
if (component.prototype && component.prototype.isReactComponent) {
componentOptions = { component };
}
const kindName = componentOptions.title || componentOptions.component.displayName;
if (previousExports[filename]) {
if (previousExports[filename] === fileExports) {
return;
}
// Otherwise clear this kind
storyStore.removeStoryKind(kindName);
storyStore.incrementRevision();
}
// We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
const kind = storiesOf(kindName, true);
(componentOptions.decorators || []).forEach(decorator => {
kind.addDecorator(decorator);
});
if (componentOptions.parameters) {
kind.addParameters(componentOptions.parameters);
}
Object.keys(examples).forEach(key => {
const example = examples[key];
const { title = key, parameters } = example;
kind.add(title, example, parameters);
});
previousExports[filename] = fileExports;
});
}
function loadStories() {
let req;
req = require.context('../../lib/ui/src', true, /\.stories\.js$/);
importAll(req);
req = require.context('../../lib/components/src', true, /\.stories\.tsx?$/);
importAll(req);
req = require.context('./stories', true, /\.stories\.js$/);
importAll(req);
}
configure(loadStories, module);
load(require.context('../../lib/ui/src', true, /\.stories\.js$/), module);
load(require.context('../../lib/components/src', true, /\.stories\.tsx?$/), module);
load(require.context('./stories', true, /\.stories\.js$/), module);

59
lib/core/src/client/preview/start.js
View File

@ -219,5 +219,62 @@ export default function start(render, { decorateStory } = {}) {
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
return { context, clientApi, configApi, forceReRender };
let previousExports = {};
const loadStories = (req, framework) => () => {
req.keys().forEach(filename => {
const fileExports = req(filename);
// An old-style story file
if (!(fileExports.default && fileExports.default.title)) {
return;
}
const { default: meta, ...examples } = fileExports;
const kindName = meta.title || meta.displayName;
if (previousExports[filename]) {
if (previousExports[filename] === fileExports) {
return;
}
// Otherwise clear this kind
storyStore.removeStoryKind(kindName);
storyStore.incrementRevision();
}
// We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
const kind = clientApi.storiesOf(kindName, true);
kind.addParameters({ framework });
(meta.decorators || []).forEach(decorator => {
kind.addDecorator(decorator);
});
if (meta.parameters) {
kind.addParameters(meta.parameters);
}
Object.keys(examples).forEach(key => {
const example = examples[key];
const { title = example.title || key, parameters } = example;
kind.add(title, example, parameters);
});
previousExports[filename] = fileExports;
});
};
const load = (req, m, framework) => {
if (m && m.hot && m.hot.dispose) {
({ previousExports = {} } = m.hot.data || {});
m.hot.dispose(data => {
// eslint-disable-next-line no-param-reassign
data.previousExports = previousExports;
});
}
configApi.configure(loadStories(req, framework), m);
};
return { load, context, clientApi, configApi, forceReRender };
}