From 77364bec0e2378bcc8be2dfedd73c3219841eb83 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 17 Jan 2020 12:26:59 +0800 Subject: [PATCH 1/3] Core: Fix default sorting of docs-only stories --- examples/official-storybook/intro.stories.mdx | 5 ++++ examples/official-storybook/main.js | 1 + lib/client-api/src/story_store.ts | 28 +++++++++++-------- 3 files changed, 23 insertions(+), 11 deletions(-) create mode 100644 examples/official-storybook/intro.stories.mdx diff --git a/examples/official-storybook/intro.stories.mdx b/examples/official-storybook/intro.stories.mdx new file mode 100644 index 00000000000..b192db9fded --- /dev/null +++ b/examples/official-storybook/intro.stories.mdx @@ -0,0 +1,5 @@ + + +# Official-storybook + +Welcome to `official-storybook`, a collection of test cases and demos for `@storybook/react` and all its addons. diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.js index cbcbfd566d3..1d6d600a8fe 100644 --- a/examples/official-storybook/main.js +++ b/examples/official-storybook/main.js @@ -1,5 +1,6 @@ module.exports = { stories: [ + './intro.stories.mdx', '../../lib/ui/src/**/*.stories.(js|tsx|mdx)', '../../lib/components/src/**/*.stories.(js|tsx|mdx)', './stories/**/*.stories.(js|tsx|mdx)', diff --git a/lib/client-api/src/story_store.ts b/lib/client-api/src/story_store.ts index 2982aeafa1c..70400e1d2b6 100644 --- a/lib/client-api/src/story_store.ts +++ b/lib/client-api/src/story_store.ts @@ -55,6 +55,8 @@ interface StoryOptions { includeDocsOnly?: boolean; } +type KindOrder = Record; + const isStoryDocsOnly = (parameters?: Parameters) => { return parameters && parameters.docsOnly; }; @@ -81,6 +83,8 @@ export default class StoryStore extends EventEmitter { _selection: Selection; + _kindOrder: KindOrder; + constructor(params: { channel: Channel }) { super(); @@ -90,6 +94,7 @@ export default class StoryStore extends EventEmitter { this._selection = {} as any; this._channel = params.channel; this._error = undefined; + this._kindOrder = {}; } setChannel = (channel: Channel) => { @@ -133,17 +138,11 @@ export default class StoryStore extends EventEmitter { stable.inplace(stories, sortFn); } else { // NOTE: when kinds are HMR'ed they get temporarily removed from the `_data` array - // and thus lose order. However in `_legacydata` they just get zeroed out, meaning - // that the order is preserved. Here we can use this to preserve the load - // order if there is no sort function, although it's a hack. - const kindOrder = Object.values(this._legacydata).reduce( - (acc: Record, { kind }: any, idx: number) => { - acc[kind] = idx; - return acc; - }, - {} + // and thus lose order. However `_kindOrder` preservers the original load order + stable.inplace( + stories, + (s1, s2) => this._kindOrder[s1[1].kind] - this._kindOrder[s2[1].kind] ); - stable.inplace(stories, (s1, s2) => kindOrder[s1[1].kind] - kindOrder[s2[1].kind]); } } // removes function values from all stories so they are safe to transport over the channel @@ -252,11 +251,18 @@ export default class StoryStore extends EventEmitter { parameters, }; - // LEGACY DATA + // Don't store docs-only stories in legacy data because + // existing clients (at the time?!), e.g. storyshots/chromatic + // are not necessarily equipped to process them if (!isStoryDocsOnly(parameters)) { this.addLegacyStory({ kind, name, storyFn, parameters }); } + // Store 1-based order of kind loading to preserve sorting on HMR + if (!this._kindOrder[kind]) { + this._kindOrder[kind] = 1 + Object.keys(this._kindOrder).length; + } + // LET'S SEND IT TO THE MANAGER this.pushToManager(); } From 38351a942098de75c79cac8928fae5b638c9b495 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 17 Jan 2020 12:50:14 +0800 Subject: [PATCH 2/3] Core: Update tests for docs-only stories --- lib/client-api/src/client_api.test.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/client-api/src/client_api.test.ts b/lib/client-api/src/client_api.test.ts index a181ad057bb..4ebf4fd45d3 100644 --- a/lib/client-api/src/client_api.test.ts +++ b/lib/client-api/src/client_api.test.ts @@ -514,21 +514,23 @@ describe('preview.client_api', () => { clientApi: { storiesOf, getStorybook }, channel, } = getContext(undefined); + const module0 = new MockModule(); const module1 = new MockModule(); const module2 = new MockModule(); channel.emit = jest.fn(); expect(getStorybook()).toEqual([]); + storiesOf('kind0', module0).add('story0-docs-only', jest.fn(), { docsOnly: true }); storiesOf('kind1', module1).add('story1', jest.fn()); storiesOf('kind2', module2).add('story2', jest.fn()); // storyStore debounces so we need to wait for the next tick await new Promise(r => setTimeout(r, 0)); - let [event, storiesHash] = channel.emit.mock.calls[0]; + let [event, args] = channel.emit.mock.calls[0]; expect(event).toEqual(Events.SET_STORIES); - expect(Object.values(storiesHash.stories).map(v => v.kind)).toEqual(['kind1', 'kind2']); + expect(Object.values(args.stories).map(v => v.kind)).toEqual(['kind0', 'kind1', 'kind2']); expect(getStorybook().map(story => story.kind)).toEqual(['kind1', 'kind2']); channel.emit.mockClear(); @@ -540,10 +542,10 @@ describe('preview.client_api', () => { await new Promise(r => setTimeout(r, 0)); // eslint-disable-next-line prefer-destructuring - [event, storiesHash] = channel.emit.mock.calls[0]; + [event, args] = channel.emit.mock.calls[0]; expect(event).toEqual(Events.SET_STORIES); - expect(Object.values(storiesHash.stories).map(v => v.kind)).toEqual(['kind1', 'kind2']); + expect(Object.values(args.stories).map(v => v.kind)).toEqual(['kind0', 'kind1', 'kind2']); expect(getStorybook().map(story => story.kind)).toEqual(['kind1', 'kind2']); }); }); From d60b3743dd6fe7f0ddb1876e409cfd4e5f86062d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 17 Jan 2020 14:52:38 +0800 Subject: [PATCH 3/3] Official-storybook: Don't load intro.stories.mdx --- examples/official-storybook/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.js index 1d6d600a8fe..cd5ac9d7505 100644 --- a/examples/official-storybook/main.js +++ b/examples/official-storybook/main.js @@ -1,6 +1,6 @@ module.exports = { stories: [ - './intro.stories.mdx', + // FIXME: Breaks e2e tests './intro.stories.mdx', '../../lib/ui/src/**/*.stories.(js|tsx|mdx)', '../../lib/components/src/**/*.stories.(js|tsx|mdx)', './stories/**/*.stories.(js|tsx|mdx)',