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

Merge branch 'next' into fix/hmr

Browse Source 
# Conflicts:
#	lib/client-api/src/story_store.js
#	lib/core/src/client/preview/start.js
This commit is contained in:
Norbert de Langen 2019-06-18 13:53:01 +02:00
commit e71dd4c816
13 changed files with 269 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
app/react-native/README.md → app/react-native/readme.md
View File

3
app/react/src/client/preview/render.js
View File

@ -53,6 +53,7 @@ export default function renderMain({
if (!forceRender) {
ReactDOM.unmountComponentAtNode(rootEl);
}
showMain();
render(element, rootEl);
showMain();
}

6
docs/src/pages/presets/preset-gallery/index.md
View File

@ -11,7 +11,11 @@ Storybook-maintained presets are available in the [Presets repo](https://github.
### [Typescript](https://github.com/storybookjs/presets/tree/master/packages/preset-typescript)
Write your stories in typescript with a single line of configuration.
One-line Typescript w/ docgen configuration for storybook.
### [SCSS](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)
One-line SCSS configuration for storybook.
## Community presets

20
examples/official-storybook/stories/core/errors.stories.js
View File

@ -1,9 +1,13 @@
import React, { Fragment } from 'react';
const BadComponent = () => ({ renderable: 'no, react can not render objects' });
export default {
title: 'Core|Errors',
};
export const exception = () => {
throw new Error('error');
throw new Error('storyFn threw an error! WHOOPS');
};
exception.title = 'story throws exception';
exception.parameters = {
@ -11,9 +15,17 @@ exception.parameters = {
chromatic: { disable: true },
};
export const errors = () => null;
errors.title = 'story errors';
errors.parameters = {
export const badComponent = () => <Fragment><div>Hello world</div><BadComponent /></Fragment>;
badComponent.title = 'story errors - variant error';
badComponent.parameters = {
notes: 'Story does not return something react can render',
storyshots: { disable: true },
};
export const badStory = () => false;
badStory.title = 'story errors - story un-renderable type';
badStory.parameters = {
notes: 'Story does not return something react can render',
storyshots: { disable: true },
};

38
lib/client-api/src/story_store.js
View File

@ -1,6 +1,4 @@
/* eslint no-underscore-dangle: 0 */
import { history, document } from 'global';
import qs from 'qs';
import EventEmitter from 'eventemitter3';
import memoize from 'memoizerific';
import debounce from 'lodash/debounce';
@ -8,10 +6,6 @@ import { stripIndents } from 'common-tags';
import Events from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { toId } from '@storybook/router/utils';
import pathToId from './pathToId';
import { getQueryParams } from './queryparams';
// TODO: these are copies from components/nav/lib
// refactor to DRY
@ -39,9 +33,6 @@ const toExtracted = obj =>
return Object.assign(acc, { [key]: value });
}, {});
const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) =>
(path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory));
export default class StoryStore extends EventEmitter {
constructor(params) {
super();
@ -51,19 +42,6 @@ export default class StoryStore extends EventEmitter {
this._revision = 0;
this._selection = {};
this._channel = params.channel;
this.on(Events.STORY_INIT, () => {
let storyId = this.getIdOnPath();
if (!storyId) {
const query = getQueryParams();
storyId = getIdFromLegacyQuery(query);
if (storyId) {
const { path, selectedKind, selectedStory, ...rest } = query;
this.setPath(storyId, rest);
}
}
this.setSelection(this.fromId(storyId), null);
});
}
setChannel = channel => {
@ -71,17 +49,6 @@ export default class StoryStore extends EventEmitter {
};
// NEW apis
getIdOnPath = () => {
const { id } = getQueryParams();
return id;
};
setPath = (storyId, params = {}) => {
const path = `${document.location.pathname}?${qs.stringify({ ...params, id: storyId })}`;
history.replaceState({}, '', path);
};
fromId = id => {
try {
const data = this._data[id];
@ -117,8 +84,11 @@ export default class StoryStore extends EventEmitter {
}
setSelection = (data, error) => {
this._selection = data === undefined ? this._selection : data;
const { storyId } = data || {};
this._selection = data === undefined ? this._selection : { storyId };
this._error = error === undefined ? this._error : error;
setTimeout(() => this.emit(Events.STORY_RENDER), 1);
};

59
lib/client-api/src/story_store.test.js
View File

@ -1,25 +1,9 @@
import { history, document } from 'global';
import createChannel from '@storybook/channel-postmessage';
import Events from '@storybook/core-events';
import { toId } from '@storybook/router/utils';
import StoryStore from './story_store';
import { defaultDecorateStory } from './client_api';
jest.mock('global', () => ({
history: { replaceState: jest.fn() },
window: {
addEventListener: jest.fn(),
},
document: {
location: {
pathname: 'pathname',
search: '',
},
addEventListener: jest.fn(),
},
}));
jest.mock('@storybook/node-logger', () => ({
logger: {
info: jest.fn(),
@ -148,47 +132,4 @@ describe('preview.story_store', () => {
});
});
});
describe('setPath', () => {
it('preserves custom URL params', () => {
const store = new StoryStore({ channel });
store.setPath('story--id', { foo: 'bar' });
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?foo=bar&id=story--id');
});
});
describe('STORY_INIT', () => {
const storyFn = () => 0;
it('supports path params', () => {
document.location = {
pathname: 'pathname',
search: '?path=/story/kind--story&bar=baz',
};
const store = new StoryStore({ channel });
store.addStory(...make('kind', 'story', storyFn));
store.setSelection = jest.fn();
store.emit(Events.STORY_INIT);
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?bar=baz&id=kind--story');
expect(store.setSelection).toHaveBeenCalled();
expect(store.setSelection.mock.calls[0][0].getDecorated()).toEqual(storyFn);
});
it('supports story kind/name params', () => {
document.location = {
pathname: 'pathname',
search: '?selectedKind=kind&selectedStory=story&bar=baz',
};
const store = new StoryStore({ channel });
store.addStory(...make('kind', 'story', storyFn));
store.setSelection = jest.fn();
store.emit(Events.STORY_INIT);
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?bar=baz&id=kind--story');
expect(store.setSelection).toHaveBeenCalled();
expect(store.setSelection.mock.calls[0][0].getDecorated()).toEqual(storyFn);
});
});
});

2
lib/core/package.json
View File

@ -49,7 +49,7 @@
"common-tags": "^1.8.0",
"core-js": "^3.0.1",
"corejs-upgrade-webpack-plugin": "^2.0.0",
"css-loader": "^2.1.1",
"css-loader": "^3.0.0",
"detect-port": "^1.3.0",
"dotenv-webpack": "^1.7.0",
"ejs": "^2.6.1",

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

@ -1,12 +1,15 @@
import addons from '@storybook/addons';
import { navigator, window, document } from 'global';
import deprecate from 'util-deprecate';
import AnsiToHtml from 'ansi-to-html';
import addons from '@storybook/addons';
import createChannel from '@storybook/channel-postmessage';
import { ClientApi, StoryStore, ConfigApi } from '@storybook/client-api';
import { toId } from '@storybook/router/utils';
import { logger } from '@storybook/client-logger';
import Events from '@storybook/core-events';
import deprecate from 'util-deprecate';
import AnsiToHtml from 'ansi-to-html';
import { initializePath, setPath } from './url';
const ansiConverter = new AnsiToHtml();
@ -56,7 +59,7 @@ function showException(exception) {
showErrorDisplay(exception);
// Log the stack to the console. So, user could check the source code.
logger.error(exception.stack);
logger.error(exception);
}
const isBrowser =
@ -125,9 +128,20 @@ export default function start(render, { decorateStory } = {}) {
const renderMain = forceRender => {
const revision = storyStore.getRevision();
const selection = storyStore.getSelection();
const loadError = storyStore.getError();
const { kind, name, getDecorated, id, error } = selection || {};
const { storyId } = storyStore.getSelection();
const data = storyStore.fromId(storyId);
const { kind, name, getDecorated, id, error } = data || {};
const renderContext = {
...context,
...data,
selectedKind: kind,
selectedStory: name,
forceRender,
};
if (loadError || error) {
showErrorDisplay(loadError || error);
@ -149,22 +163,17 @@ export default function start(render, { decorateStory } = {}) {
addons.getChannel().emit(Events.STORY_CHANGED, id);
}
render({
...context,
...selection,
selectedKind: kind,
selectedStory: name,
forceRender,
});
previousRevision = revision;
previousKind = kind;
previousStory = name;
render(renderContext);
addons.getChannel().emit(Events.STORY_RENDERED, id);
showMain();
} else {
showNopreview();
addons.getChannel().emit(Events.STORY_MISSING, id);
}
previousRevision = revision;
previousKind = kind;
previousStory = name;
if (!forceRender) {
document.documentElement.scrollTop = 0;
@ -202,10 +211,8 @@ export default function start(render, { decorateStory } = {}) {
storyId = deprecatedToId(kind, name);
}
const data = storyStore.fromId(storyId);
storyStore.setSelection(data);
storyStore.setPath(storyId);
storyStore.setSelection({ storyId });
setPath({ storyId });
});
// Handle keyboard shortcuts
@ -220,6 +227,11 @@ export default function start(render, { decorateStory } = {}) {
};
}
storyStore.on(Events.STORY_INIT, () => {
const { storyId } = initializePath();
storyStore.setSelection({ storyId });
});
storyStore.on(Events.STORY_RENDER, renderUI);
if (typeof window !== 'undefined') {

39
lib/core/src/client/preview/start.test.js
View File

@ -1,9 +1,12 @@
import { document, window } from 'global';
/* eslint-disable no-underscore-dangle */
import { history, document, window } from 'global';
import Events from '@storybook/core-events';
import start from './start';
jest.mock('@storybook/client-logger');
jest.mock('global', () => ({
history: { replaceState: jest.fn() },
navigator: { userAgent: 'browser', platform: '' },
window: {
__STORYBOOK_CLIENT_API__: undefined,
@ -105,3 +108,37 @@ it('emits an error and shows error when your framework calls showError', () => {
expect(render).toHaveBeenCalled();
expect(document.body.classList.add).toHaveBeenCalledWith('sb-show-errordisplay');
});
describe('STORY_INIT', () => {
it('supports path params', () => {
document.location = {
pathname: 'pathname',
search: '?path=/story/kind--story&bar=baz',
};
const render = jest.fn();
const { clientApi } = start(render);
const store = clientApi._storyStore;
store.setSelection = jest.fn();
store.emit(Events.STORY_INIT);
store.emit();
expect(store.setSelection).toHaveBeenCalledWith({ storyId: 'kind--story' });
});
it('supports story kind/name params', () => {
document.location = {
pathname: 'pathname',
search: '?selectedKind=kind&selectedStory=story&bar=baz',
};
const render = jest.fn();
const { clientApi } = start(render);
const store = clientApi._storyStore;
store.setSelection = jest.fn();
store.emit(Events.STORY_INIT);
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?bar=baz&id=kind--story');
expect(store.setSelection).toHaveBeenCalledWith({ storyId: 'kind--story' });
});
});

39
lib/core/src/client/preview/url.js Normal file
View File

@ -0,0 +1,39 @@
import { history, document } from 'global';
import qs from 'qs';
import { toId } from '@storybook/router/utils';
export function pathToId(path) {
const match = (path || '').match(/^\/story\/(.+)/);
if (!match) {
throw new Error(`Invalid path '${path}', must start with '/story/'`);
}
return match[1];
}
export const setPath = ({ storyId }) => {
const { path, selectedKind, selectedStory, ...rest } = qs.parse(document.location.search, {
ignoreQueryPrefix: true,
});
const newPath = `${document.location.pathname}?${qs.stringify({ ...rest, id: storyId })}`;
history.replaceState({}, '', newPath);
};
export const getIdFromLegacyQuery = ({ path, selectedKind, selectedStory }) =>
(path && pathToId(path)) || (selectedKind && selectedStory && toId(selectedKind, selectedStory));
export const parseQueryParameters = search => {
const { id } = qs.parse(search, { ignoreQueryPrefix: true });
return id;
};
export const initializePath = () => {
const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
let { id: storyId } = query;
if (!storyId) {
storyId = getIdFromLegacyQuery(query);
if (storyId) {
setPath({ storyId });
}
}
return { storyId };
};

79
lib/core/src/client/preview/url.test.js Normal file
View File

@ -0,0 +1,79 @@
import { history, document } from 'global';
import {
pathToId,
setPath,
getIdFromLegacyQuery,
parseQueryParameters,
initializePath,
} from './url';
jest.mock('global', () => ({
history: { replaceState: jest.fn() },
document: {
location: {
pathname: 'pathname',
search: '',
},
},
}));
describe('url', () => {
describe('pathToId', () => {
it('should parse valid ids', () => {
expect(pathToId('/story/story--id')).toEqual('story--id');
});
it('should error on invalid ids', () => {
[null, '', '/whatever/story/story--id'].forEach(path => {
expect(() => pathToId(path)).toThrow(/Invalid/);
});
});
});
describe('setPath', () => {
it('should navigate to storyId', () => {
setPath({ storyId: 'story--id' });
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?id=story--id');
});
it('should replace legacy parameters but preserve others', () => {
document.location.search = 'foo=bar&selectedStory=selStory&selectedKind=selKind';
setPath({ storyId: 'story--id' });
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?foo=bar&id=story--id');
});
});
describe('getIdFromLegacyQuery', () => {
it('should parse story paths', () => {
expect(getIdFromLegacyQuery({ path: '/story/story--id' })).toBe('story--id');
});
it('should parse legacy queries', () => {
expect(
getIdFromLegacyQuery({ path: null, selectedKind: 'kind', selectedStory: 'story' })
).toBe('kind--story');
});
it('should not parse non-queries', () => {
expect(getIdFromLegacyQuery({})).toBeUndefined();
});
});
describe('parseQueryParameters', () => {
it('should parse id', () => {
expect(parseQueryParameters('?foo=bar&id=story--id')).toBe('story--id');
});
it('should not parse non-ids', () => {
expect(parseQueryParameters('')).toBeUndefined();
});
});
describe('initializePath', () => {
it('should handle id queries', () => {
document.location.search = '?id=story--id';
expect(initializePath()).toEqual({ storyId: 'story--id' });
expect(history.replaceState).not.toHaveBeenCalled();
});
it('should redirect legacy queries', () => {
document.location.search = '?selectedKind=kind&selectedStory=story';
expect(initializePath()).toEqual({ storyId: 'kind--story' });
expect(history.replaceState).toHaveBeenCalledWith({}, '', 'pathname?id=kind--story');
});
});
});

7
scripts/reset.js
View File

@ -23,7 +23,12 @@ cleaningProcess.stdout.on('data', data => {
const [, uri] = i.match(/Would remove (.*)$/) || [];
if (uri) {
if (uri.match(/node_modules/) || uri.match(/dist/) || uri.match(/\.cache/) || uri.match(/dll/)) {
if (
uri.match(/node_modules/) ||
uri.match(/dist/) ||
uri.match(/\.cache/) ||
uri.match(/dll/)
) {
del(uri).then(() => {
console.log(`deleted ${uri}`);
});

53
yarn.lock
View File

@ -9124,6 +9124,24 @@ css-loader@2.1.1, css-loader@^2.1.1:
postcss-value-parser "^3.3.0"
schema-utils "^1.0.0"
css-loader@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.0.0.tgz#bdd48a4921eefedf1f0a55266585944d4e5efc63"
integrity sha512-WR6KZuCkFbnMhRrGPlkwAA7SSCtwqPwpyXJAPhotYkYsc0mKU9n/fu5wufy4jl2WhBw9Ia8gUQMIp/1w98DuPw==
dependencies:
camelcase "^5.3.1"
cssesc "^3.0.0"
icss-utils "^4.1.1"
loader-utils "^1.2.3"
normalize-path "^3.0.0"
postcss "^7.0.17"
postcss-modules-extract-imports "^2.0.0"
postcss-modules-local-by-default "^3.0.2"
postcss-modules-scope "^2.1.0"
postcss-modules-values "^3.0.0"
postcss-value-parser "^4.0.0"
schema-utils "^1.0.0"
css-parse@1.7.x:
version "1.7.0"
resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
@ -14167,10 +14185,10 @@ icss-replace-symbols@^1.1.0:
resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
icss-utils@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.0.tgz#339dbbffb9f8729a243b701e1c29d4cc58c52f0e"
integrity sha512-3DEun4VOeMvSczifM3F2cKQrDQ5Pj6WKhkOq6HD4QTnDUAq8MQRxy5TX6Sy1iY6WPBe4gQ3p5vTECjbIkglkkQ==
icss-utils@^4.0.0, icss-utils@^4.1.0, icss-utils@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
dependencies:
postcss "^7.0.14"
@ -21016,6 +21034,16 @@ postcss-modules-local-by-default@^2.0.6:
postcss-selector-parser "^6.0.0"
postcss-value-parser "^3.3.1"
postcss-modules-local-by-default@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.2.tgz#e8a6561be914aaf3c052876377524ca90dbb7915"
integrity sha512-jM/V8eqM4oJ/22j0gx4jrp63GSvDH6v86OqyTHHUvk4/k1vceipZsaymiZ5PvocqZOl5SFHiFJqjs3la0wnfIQ==
dependencies:
icss-utils "^4.1.1"
postcss "^7.0.16"
postcss-selector-parser "^6.0.2"
postcss-value-parser "^4.0.0"
postcss-modules-scope@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
@ -21032,6 +21060,14 @@ postcss-modules-values@^2.0.0:
icss-replace-symbols "^1.1.0"
postcss "^7.0.6"
postcss-modules-values@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10"
integrity sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==
dependencies:
icss-utils "^4.0.0"
postcss "^7.0.6"
postcss-nesting@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
@ -21280,7 +21316,7 @@ postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.3, postcss-sel
indexes-of "^1.0.1"
uniq "^1.0.1"
postcss-selector-parser@^6.0.0:
postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
version "6.0.2"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
@ -21313,6 +21349,11 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.2.3, postcss-value-parser@^
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
postcss-value-parser@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz#99a983d365f7b2ad8d0f9b8c3094926eab4b936d"
integrity sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==
postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
@ -21340,7 +21381,7 @@ postcss@^6.0.9:
source-map "^0.6.1"
supports-color "^5.4.0"
postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6:
postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6:
version "7.0.17"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==