Merge branch 'next' into 16222-sort-function-errors

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)
 

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:

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,

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() {

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 {

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(() => {

lib/builder-webpack4/src/preview/iframe-webpack.config.ts

@@ -181,6 +181,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
           options: templateOptions,
           version: packageJson.version,
           globals: {
+            CONFIG_TYPE: configType,
             LOGLEVEL: logLevel,
             FRAMEWORK_OPTIONS: frameworkOptions,
             FEATURES: features,

lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -180,6 +180,7 @@ export default async (options: Options & Record<string, any>): Promise<Configura
           options: templateOptions,
           version: packageJson.version,
           globals: {
+            CONFIG_TYPE: configType,
             LOGLEVEL: logLevel,
             FRAMEWORK_OPTIONS: frameworkOptions,
             FEATURES: features,

lib/manager-webpack4/src/presets/manager-preset.ts

@@ -38,6 +38,7 @@ export async function managerWebpack(
     releaseNotesData,
     presets,
     modern,
+    features,
   }: Options & ManagerWebpackOptions
 ): Promise<Configuration> {
   const envs = await presets.apply<Record<string, string>>('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

lib/manager-webpack5/src/presets/manager-preset.ts

@@ -37,6 +37,7 @@ export async function managerWebpack(
     releaseNotesData,
     presets,
     modern,
+    features,
   }: Options & ManagerWebpackOptions
 ): Promise<Configuration> {
   const envs = await presets.apply<Record<string, string>>('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

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() {