diff --git a/CHANGELOG.md b/CHANGELOG.md index ef3ffa37dd9..4ee0a4ab3ff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,17 +1,23 @@ +## 6.3.11 (October 12, 2021) + +### Bug Fixes + +- CLI: Fix CRA version detection crash ([#16308](https://github.com/storybookjs/storybook/pull/16308)) + ## 6.4.0-beta.9 (October 12, 2021) ### Features -* Webpack5: Don't emit stats unless debugWebpack is set ([#16132](https://github.com/storybookjs/storybook/pull/16132)) +- Webpack5: Don't emit stats unless debugWebpack is set ([#16132](https://github.com/storybookjs/storybook/pull/16132)) ### Bug Fixes -* CLI: Fix CRA version detection crash ([#16308](https://github.com/storybookjs/storybook/pull/16308)) -* Core: Better story id generation, cope with unusual stories ([#16309](https://github.com/storybookjs/storybook/pull/16309)) -* Core: Simplify `DOCS_RENDERED` and only use `STORY_RENDERED` for hooks ([#16310](https://github.com/storybookjs/storybook/pull/16310)) -* Core: Fix `extract`, `SET_STORIES` and `getStoriesJsonData` ([#16299](https://github.com/storybookjs/storybook/pull/16299)) -* TypeScript: Add `id` to BaseMeta type ([#16216](https://github.com/storybookjs/storybook/pull/16216)) -* CSF: Fix support for `X.story` annotations ([#16297](https://github.com/storybookjs/storybook/pull/16297)) +- CLI: Fix CRA version detection crash ([#16308](https://github.com/storybookjs/storybook/pull/16308)) +- Core: Better story id generation, cope with unusual stories ([#16309](https://github.com/storybookjs/storybook/pull/16309)) +- Core: Simplify `DOCS_RENDERED` and only use `STORY_RENDERED` for hooks ([#16310](https://github.com/storybookjs/storybook/pull/16310)) +- Core: Fix `extract`, `SET_STORIES` and `getStoriesJsonData` ([#16299](https://github.com/storybookjs/storybook/pull/16299)) +- TypeScript: Add `id` to BaseMeta type ([#16216](https://github.com/storybookjs/storybook/pull/16216)) +- CSF: Fix support for `X.story` annotations ([#16297](https://github.com/storybookjs/storybook/pull/16297)) ## 6.4.0-beta.8 (October 11, 2021) diff --git a/MIGRATION.md b/MIGRATION.md index 3029bd97b0e..f81bfba39c2 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -13,7 +13,7 @@ - [Loader behavior with args changes](#loader-behavior-with-args-changes) - [Angular component parameter removed](#angular-component-parameter-removed) - [From version 6.2.x to 6.3.0](#from-version-62x-to-630) - - [Webpack 5](#webpack-5-manager-build) + - [Webpack 5](#webpack-5) - [Fixing hoisting issues](#fixing-hoisting-issues) - [Webpack 5 manager build](#webpack-5-manager-build) - [Wrong webpack version](#wrong-webpack-version) @@ -393,9 +393,9 @@ export const MyStory = () => ({ component: MyComponent, ... }) Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so: ```shell -yarn add @storybook/builder-webpack5@next @storybook/manager-webpack5 --dev +yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev # Or -npm install @storybook/builder-webpack5@next @storybook/manager-webpack5 --save-dev +npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev ``` Then edit your `.storybook/main.js` config: diff --git a/addons/storyshots/storyshots-core/src/api/index.ts b/addons/storyshots/storyshots-core/src/api/index.ts index df009a71bca..3d9785bf8ac 100644 --- a/addons/storyshots/storyshots-core/src/api/index.ts +++ b/addons/storyshots/storyshots-core/src/api/index.ts @@ -24,15 +24,6 @@ function callTestMethodGlobals( const isDisabled = (parameter: any) => parameter === false || (parameter && parameter.disable === true); - -// This is just here so that an error isn't thrown when we subclass `EventSource` in `StoryIndexClient` -// Currently the v7 store (that uses the client) does not work with Storyshots. -class EventSourceStandin { - constructor() { - throw new Error('EventSourceStandin is not intended to be used'); - } -} - function testStorySnapshots(options: StoryshotsOptions = {}) { if (typeof describe !== 'function') { throw new Error('testStorySnapshots is intended only to be used inside jest'); @@ -40,9 +31,6 @@ function testStorySnapshots(options: StoryshotsOptions = {}) { addons.setChannel(mockChannel()); - // Add a mock EventSource class as it is extended by the `StoryIndexClient` (we don't actually use that in v6 mode) - if (!global.EventSource) global.EventSource = EventSourceStandin; - const { storybook, framework, renderTree, renderShallowTree } = loadFramework(options); const { asyncJest, diff --git a/lib/api/src/lib/StoryIndexClient.ts b/lib/api/src/lib/StoryIndexClient.ts index 186b35590bb..029d967bd54 100644 --- a/lib/api/src/lib/StoryIndexClient.ts +++ b/lib/api/src/lib/StoryIndexClient.ts @@ -5,18 +5,24 @@ import global from 'global'; import { StoryIndex } from './stories'; -const { fetch } = global; +const { window, fetch, CONFIG_TYPE } = global; const PATH = './stories.json'; // The stories.json endpoint both serves the basic data on a `GET` request and a stream of // invalidation events when called as a `event-stream` (i.e. via SSE). -// So the `StoryIndexClient` is a EventSource that can also do a fetch +export class StoryIndexClient { + source: EventSource; -// eslint-disable-next-line no-undef -export class StoryIndexClient extends EventSource { constructor() { - super(PATH); + if (CONFIG_TYPE === 'DEVELOPMENT') { + this.source = new window.EventSource(PATH); + } + } + + // Silently never emit events in built storybook modes + addEventListener(event: string, cb: (...args: any[]) => void) { + if (this.source) this.source.addEventListener(event, cb); } async fetch() { diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts index c25899b282a..6442bd61bf1 100644 --- a/lib/api/src/modules/stories.ts +++ b/lib/api/src/modules/stories.ts @@ -36,7 +36,7 @@ import { Args, ModuleFn } from '../index'; import { ComposedRef } from './refs'; import { StoryIndexClient } from '../lib/StoryIndexClient'; -const { DOCS_MODE } = global; +const { DOCS_MODE, FEATURES } = global; const INVALIDATE = 'INVALIDATE'; type Direction = -1 | 1; @@ -509,9 +509,11 @@ export const init: ModuleFn = ({ } ); - indexClient = new StoryIndexClient(); - indexClient.addEventListener(INVALIDATE, () => fullAPI.fetchStoryList()); - await fullAPI.fetchStoryList(); + if (FEATURES.storyStoreV7) { + indexClient = new StoryIndexClient(); + indexClient.addEventListener(INVALIDATE, () => fullAPI.fetchStoryList()); + await fullAPI.fetchStoryList(); + } }; return { diff --git a/lib/api/src/tests/stories.test.js b/lib/api/src/tests/stories.test.js index 94998ab3f59..5f16cfb6e0c 100644 --- a/lib/api/src/tests/stories.test.js +++ b/lib/api/src/tests/stories.test.js @@ -18,7 +18,9 @@ const mockStories = jest.fn(); jest.mock('../lib/events'); jest.mock('global', () => ({ ...jest.requireActual('global'), - fetch: jest.fn(), + fetch: jest.fn(() => ({ json: () => ({ v: 3, stories: mockStories() }) })), + FEATURES: { storyStoreV7: true }, + CONFIG_TYPE: 'DEVELOPMENT', })); beforeEach(() => { diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index bf2ded4e82e..efd5fdd8c41 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -181,6 +181,7 @@ export default async (options: Options & Record): Promise): Promise { const envs = await presets.apply>('env'); @@ -99,6 +100,7 @@ export async function managerWebpack( globals: { CONFIG_TYPE: configType, LOGLEVEL: logLevel, + FEATURES: features, VERSIONCHECK: JSON.stringify(versionCheck), RELEASE_NOTES_DATA: JSON.stringify(releaseNotesData), DOCS_MODE: docsMode, // global docs mode diff --git a/lib/manager-webpack5/src/presets/manager-preset.ts b/lib/manager-webpack5/src/presets/manager-preset.ts index c4662f406d6..48434223a20 100644 --- a/lib/manager-webpack5/src/presets/manager-preset.ts +++ b/lib/manager-webpack5/src/presets/manager-preset.ts @@ -37,6 +37,7 @@ export async function managerWebpack( releaseNotesData, presets, modern, + features, }: Options & ManagerWebpackOptions ): Promise { const envs = await presets.apply>('env'); @@ -98,6 +99,7 @@ export async function managerWebpack( globals: { CONFIG_TYPE: configType, LOGLEVEL: logLevel, + FEATURES: features, VERSIONCHECK: JSON.stringify(versionCheck), RELEASE_NOTES_DATA: JSON.stringify(releaseNotesData), DOCS_MODE: docsMode, // global docs mode diff --git a/lib/preview-web/src/StoryIndexClient.ts b/lib/preview-web/src/StoryIndexClient.ts index 501506b9c16..c21d120e142 100644 --- a/lib/preview-web/src/StoryIndexClient.ts +++ b/lib/preview-web/src/StoryIndexClient.ts @@ -5,17 +5,24 @@ import global from 'global'; import { StoryIndex } from '@storybook/store'; -const { fetch } = global; +const { window, fetch, CONFIG_TYPE } = global; const PATH = './stories.json'; + // The stories.json endpoint both serves the basic data on a `GET` request and a stream of // invalidation events when called as a `event-stream` (i.e. via SSE). -// So the `StoryIndexClient` is a EventSource that can also do a fetch +export class StoryIndexClient { + source: EventSource; -// eslint-disable-next-line no-undef -export class StoryIndexClient extends EventSource { constructor() { - super(PATH); + if (CONFIG_TYPE === 'DEVELOPMENT') { + this.source = new window.EventSource(PATH); + } + } + + // Silently never emit events in bult storybook modes + addEventListener(event: string, cb: (...args: any[]) => void) { + if (this.source) this.source.addEventListener(event, cb); } async fetch() {