Merge pull request #19749 from storybookjs/tech/introduce-preview-api

Tech/introduce-preview-api

code/addons/a11y/package.json

@@ -69,6 +69,7 @@
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "axe-core": "^4.2.0",

code/addons/a11y/src/a11yRunner.test.ts

@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { EVENTS } from './constants';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 const mockedAddons = addons as jest.Mocked<typeof addons>;
 
 describe('a11yRunner', () => {

code/addons/a11y/src/a11yRunner.ts

@@ -1,5 +1,5 @@
 import global from 'global';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { EVENTS } from './constants';
 import type { A11yParameters } from './params';
 

code/addons/actions/package.json

@@ -81,6 +81,7 @@
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "dequal": "^2.0.2",

code/addons/actions/src/decorator.ts

@@ -1,5 +1,5 @@
 import global from 'global';
-import { useEffect, makeDecorator } from '@storybook/addons';
+import { useEffect, makeDecorator } from '@storybook/preview-api';
 import { actions } from './runtime/actions';
 
 import { PARAM_KEY } from './constants';

code/addons/actions/src/runtime/__tests__/action.test.js

@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { action, configureActions } from '../..';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 
 const createChannel = () => {
   const channel = { emit: jest.fn() };

code/addons/actions/src/runtime/__tests__/actions.test.js

@@ -1,7 +1,7 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { actions } from '../..';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 
 const createChannel = () => {
   const channel = { emit: jest.fn() };

code/addons/actions/src/runtime/action.ts

@@ -1,5 +1,5 @@
 import uuidv4 from 'uuid-browser/v4';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { EVENT_ID } from '../constants';
 import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
 import { config } from './configureActions';

code/addons/backgrounds/package.json

@@ -80,6 +80,7 @@
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "global": "^4.4.0",

code/addons/backgrounds/src/decorators/withBackground.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/preview-api';
 import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

code/addons/backgrounds/src/decorators/withGrid.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/preview-api';
 import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addGridStyle } from '../helpers';

code/addons/controls/package.json

@@ -74,7 +74,7 @@
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",
-    "@storybook/store": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "lodash": "^4.17.21",

code/addons/docs/docs/recipes.md

@@ -159,7 +159,7 @@ If you're currently using the notes/info addons, you can upgrade to DocsPage by
 Suppose you've added a `notes` parameter to each component in your library, containing markdown text, and you want that to show up at the top of the page in the `Description` slot. You could do that by adding the following snippet to `.storybook/preview.js`:
 
 ```js
-import { addParameters } from '@storybook/client-api';
+import { addParameters } from '@storybook/preview-api';
 
 addParameters({
   docs: {

code/addons/docs/package.json

@@ -94,7 +94,8 @@
     "@storybook/mdx2-csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.53",
     "@storybook/postinstall": "7.0.0-alpha.53",
-    "@storybook/preview-web": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
+    "@storybook/theming": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",

code/addons/docs/src/DocsRenderer.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import type { Renderer, Parameters } from '@storybook/types';
+import type { Renderer, Parameters, DocsContextProps, DocsRenderFunction } from '@storybook/types';
-import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
 import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
 import { MDXProvider } from '@mdx-js/react';

code/addons/essentials/package.json

@@ -124,6 +124,7 @@
     "@storybook/api": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/addons/highlight/package.json

@@ -62,6 +62,7 @@
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "global": "^4.4.0"
   },
   "devDependencies": {

code/addons/highlight/src/preview.ts

@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import global from 'global';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { STORY_CHANGED } from '@storybook/core-events';
 import { HIGHLIGHT, RESET_HIGHLIGHT, HIGHLIGHT_STYLE_ID } from './constants';
 

code/addons/interactions/package.json

@@ -79,6 +79,7 @@
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
     "@storybook/instrumenter": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "global": "^4.4.0",

code/addons/interactions/src/preview.ts

@@ -1,6 +1,6 @@
 /// <reference types="node" />
 
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import type {
   Renderer,

code/addons/jest/package.json

@@ -74,6 +74,7 @@
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",
     "global": "^4.4.0",
     "react-sizeme": "^3.0.1",

code/addons/jest/src/index.ts

@@ -1,6 +1,6 @@
 /// <reference types="webpack-env" />
 
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { normalize, sep } from 'upath';
 import { ADD_TESTS, defineJestParameter } from './shared';
 

code/addons/links/package.json

@@ -80,6 +80,7 @@
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
     "@storybook/csf": "next",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/router": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "global": "^4.4.0",

code/addons/links/src/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 
 import EVENTS, { ADDON_ID } from './constants';
 

code/addons/links/src/react/components/link.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SELECT_STORY } from '@storybook/core-events';
 import LinkTo from './link';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 jest.mock('global', () => ({
   document: {
     location: {

code/addons/links/src/utils.test.ts

@@ -1,9 +1,9 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { SELECT_STORY } from '@storybook/core-events';
 
 import { linkTo, hrefTo } from './utils';
 
-jest.mock('@storybook/addons');
+jest.mock('@storybook/preview-api');
 jest.mock('global', () => ({
   document: global.document,
   window: global,

code/addons/links/src/utils.ts

@@ -1,5 +1,5 @@
 import global from 'global';
-import { addons, makeDecorator } from '@storybook/addons';
+import { addons, makeDecorator } from '@storybook/preview-api';
 import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
 import type { StoryId, StoryName, ComponentTitle } from '@storybook/types';
 import { toId } from '@storybook/csf';

code/addons/measure/package.json

@@ -79,6 +79,7 @@
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "global": "^4.4.0"
   },

code/addons/measure/src/withMeasure.ts

@@ -1,5 +1,5 @@
 /* eslint-env browser */
-import { useEffect } from '@storybook/addons';
+import { useEffect } from '@storybook/preview-api';
 import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 import { drawSelectedElement } from './box-model/visualizer';
 import { init, rescale, destroy } from './box-model/canvas';

code/addons/outline/package.json

@@ -82,6 +82,7 @@
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "global": "^4.4.0",
     "ts-dedent": "^2.0.0"

code/addons/outline/src/withOutline.ts

@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/preview-api';
 import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addOutlineStyles } from './helpers';

code/addons/storyshots/storyshots-core/package.json

@@ -41,9 +41,9 @@
     "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
     "@storybook/client-api": "7.0.0-alpha.53",
-    "@storybook/core-client": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/core-webpack": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "@types/glob": "^7.1.3",
     "@types/jest-specific-snapshot": "^0.5.6",

code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts

@@ -1,5 +1,5 @@
 import type { Renderer, Addon_Loadable } from '@storybook/types';
-import type { ClientApi as ClientApiClass } from '@storybook/client-api';
+import type { ClientApi as ClientApiClass } from '@storybook/preview-api';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 import type { SupportedFramework } from './SupportedFramework';
 

code/addons/storyshots/storyshots-core/src/frameworks/angular/loader.ts

@@ -35,13 +35,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/html/loader.ts

@@ -12,13 +12,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/preact/loader.ts

@@ -18,13 +18,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/rax/loader.ts

@@ -13,13 +13,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/react/loader.ts

@@ -10,13 +10,13 @@ function test(options: StoryshotsOptions): boolean {
 function load(options: StoryshotsOptions) {
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/riot/loader.ts

@@ -18,13 +18,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/svelte/loader.ts

@@ -15,13 +15,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/vue/loader.ts

@@ -18,13 +18,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/vue3/loader.ts

@@ -13,13 +13,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts

@@ -12,13 +12,13 @@ function load(options: StoryshotsOptions) {
 
   let mockStartedAPI: any;
 
-  jest.mock('@storybook/core-client', () => {
+  jest.mock('@storybook/preview-api', () => {
-    const coreClientAPI = jest.requireActual('@storybook/core-client');
+    const previewAPI = jest.requireActual('@storybook/preview-api');
 
     return {
-      ...coreClientAPI,
+      ...previewAPI,
       start: (...args: any[]) => {
-        mockStartedAPI = coreClientAPI.start(...args);
+        mockStartedAPI = previewAPI.start(...args);
         return mockStartedAPI;
       },
     };

code/addons/storysource/package.json

@@ -57,6 +57,7 @@
     "@storybook/api": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/router": "7.0.0-alpha.53",
     "@storybook/source-loader": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",

code/addons/toolbars/package.json

@@ -71,6 +71,7 @@
     "@storybook/api": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53"
   },
   "devDependencies": {

code/addons/viewport/package.json

@@ -77,6 +77,7 @@
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/components": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",

code/frameworks/angular/package.json

@@ -45,7 +45,7 @@
     "@storybook/core-webpack": "7.0.0-alpha.53",
     "@storybook/docs-tools": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",
-    "@storybook/store": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",

code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import { DOCS_RENDERED, STORY_CHANGED } from '@storybook/core-events';
 import { AbstractRenderer } from './AbstractRenderer';
 import { StoryFnAngularReturnType, Parameters } from '../types';

code/frameworks/angular/src/client/decorateStory.ts

@@ -1,5 +1,5 @@
 import { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/types';
-import { sanitizeStoryContextUpdate } from '@storybook/store';
+import { sanitizeStoryContextUpdate } from '@storybook/preview-api';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 
 import { AngularRenderer } from './types';

code/frameworks/angular/src/client/docs/sourceDecorator.ts

@@ -1,4 +1,4 @@
-import { addons, useEffect } from '@storybook/addons';
+import { addons, useEffect } from '@storybook/preview-api';
 import { PartialStoryFn } from '@storybook/types';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { StoryContext, AngularRenderer } from '../types';

code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts

@@ -815,7 +815,7 @@ const newWebpackConfiguration = (
       modules: ['node_modules'],
       mainFields: ['browser', 'main'],
       alias: {
-        '@storybook/addons': '/Users/joe/storybook/lib/addons',
+        '@storybook/preview-api': '/Users/joe/storybook/lib/addons',
         '@storybook/api': '/Users/joe/storybook/lib/api',
         '@storybook/channels': '/Users/joe/storybook/lib/channels',
         '@storybook/channel-postmessage': '/Users/joe/storybook/lib/channel-postmessage',

code/frameworks/ember/package.json

@@ -32,10 +32,9 @@
   },
   "dependencies": {
     "@storybook/builder-webpack5": "7.0.0-alpha.53",
-    "@storybook/core-client": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/docs-tools": "7.0.0-alpha.53",
-    "@storybook/store": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "global": "^4.4.0",
     "react": "16.14.0",

code/frameworks/ember/src/client/preview/index.ts

@@ -1,4 +1,4 @@
-import { start } from '@storybook/core-client';
+import { start } from '@storybook/preview-api';
 
 import './globals';
 import type { EmberRenderer } from './types';

code/frameworks/nextjs/package.json

@@ -64,6 +64,7 @@
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",
     "@storybook/preset-react-webpack": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/react": "7.0.0-alpha.53",
     "@types/node": "^16.0.0",
     "find-up": "^5.0.0",

code/frameworks/react-vite/package.json

@@ -57,8 +57,7 @@
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",
-    "@storybook/client-api": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
-    "@storybook/preview-web": "7.0.0-alpha.53",
     "@storybook/react": "7.0.0-alpha.53",
     "@vitejs/plugin-react": "^2.0.0",
     "ast-types": "^0.14.2",

code/frameworks/react-vite/src/index.ts

@@ -1,13 +1,11 @@
-// exports for builder-vite
+// TODO: figure out if any of this is required
-import * as clientApi from '@storybook/client-api';
+// possibly make it not required, framework should never be imported directly, except for types in config files
 
-// client-api exposes both a class, and individual named exports.
-// The class is used in StoryStoreV7 and the individual exports in SSv6
-const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { addons } from '@storybook/preview-api';
-export { clientApi, ClientApi };
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
+export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/svelte-vite/package.json

@@ -56,9 +56,8 @@
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",
-    "@storybook/client-api": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",
-    "@storybook/preview-web": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/svelte": "7.0.0-alpha.53",
     "@sveltejs/vite-plugin-svelte": "^1.0.0",
     "magic-string": "^0.26.1",

code/frameworks/svelte-vite/src/index.ts

@@ -1,13 +1,8 @@
-// exports for builder-vite
-import * as clientApi from '@storybook/client-api';
-
-// client-api exposes both a class, and individual named exports.
-// The class is used in StoryStoreV7 and the individual exports in SSv6
-const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { addons } from '@storybook/preview-api';
-export { clientApi, ClientApi };
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
+export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/vue-vite/package.json

@@ -54,10 +54,9 @@
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",
-    "@storybook/client-api": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/core-server": "7.0.0-alpha.53",
-    "@storybook/preview-web": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/vue": "7.0.0-alpha.53",
     "magic-string": "^0.26.1",
     "vite": "^3.1.3",

code/frameworks/vue-vite/src/index.ts

@@ -1,13 +1,8 @@
-// exports for builder-vite
-import * as clientApi from '@storybook/client-api';
-
-// client-api exposes both a class, and individual named exports.
-// The class is used in StoryStoreV7 and the individual exports in SSv6
-const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { addons } from '@storybook/preview-api';
-export { clientApi, ClientApi };
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
+export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/vue3-vite/package.json

@@ -55,9 +55,8 @@
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",
-    "@storybook/client-api": "7.0.0-alpha.53",
     "@storybook/core-server": "7.0.0-alpha.53",
-    "@storybook/preview-web": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/vue3": "7.0.0-alpha.53",
     "@vitejs/plugin-vue": "^3.0.0",
     "magic-string": "^0.26.1",

code/frameworks/vue3-vite/src/index.ts

@@ -1,13 +1,8 @@
-// exports for builder-vite
-import * as clientApi from '@storybook/client-api';
-
-// client-api exposes both a class, and individual named exports.
-// The class is used in StoryStoreV7 and the individual exports in SSv6
-const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { addons } from '@storybook/preview-api';
-export { clientApi, ClientApi };
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
+export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/web-components-vite/package.json

@@ -55,10 +55,9 @@
     "@storybook/builder-vite": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
     "@storybook/channel-websocket": "7.0.0-alpha.53",
-    "@storybook/client-api": "7.0.0-alpha.53",
     "@storybook/core-server": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",
-    "@storybook/preview-web": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/web-components": "7.0.0-alpha.53",
     "magic-string": "^0.26.1",
     "vite": "3"

code/frameworks/web-components-vite/src/index.ts

@@ -1,13 +1,8 @@
-// exports for builder-vite
-import * as clientApi from '@storybook/client-api';
-
-// client-api exposes both a class, and individual named exports.
-// The class is used in StoryStoreV7 and the individual exports in SSv6
-const { ClientApi } = clientApi;
 export { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 export { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
-export { addons } from '@storybook/addons';
+
-export { composeConfigs, PreviewWeb } from '@storybook/preview-web';
+export { addons } from '@storybook/preview-api';
-export { clientApi, ClientApi };
+export { composeConfigs, PreviewWeb } from '@storybook/preview-api';
+export { ClientApi } from '@storybook/preview-api';
 
 export type { StorybookConfig } from '@storybook/builder-vite';

code/lib/addons/src/make-decorator.ts

@@ -1,8 +1,8 @@
 import type { Addon_StoryWrapper, Addon_LegacyStoryFn, Addon_StoryContext } from '@storybook/types';
 
-type MakeDecoratorResult = (...args: any) => any;
+export type MakeDecoratorResult = (...args: any) => any;
 
-interface MakeDecoratorOptions {
+export interface MakeDecoratorOptions {
   name: string;
   parameterName: string;
   skipIfNoParametersOrOptions?: boolean;

code/lib/api/src/index.tsx

@@ -125,7 +125,7 @@ export type ManagerProviderProps = RouterData &
     children: ReactNode | ((props: Combo) => ReactNode);
   };
 
-// This is duplicated from @storybook/client-api for the reasons mentioned in lib-addons/types.js
+// This is duplicated from @storybook/preview-api for the reasons mentioned in lib-addons/types.js
 export const combineParameters = (...parameterSets: Parameters[]) =>
   mergeWith({}, ...parameterSets, (objValue: any, srcValue: any) => {
     // Treat arrays as scalars:

code/lib/builder-vite/package.json

@@ -49,7 +49,7 @@
     "@storybook/mdx2-csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.53",
     "@storybook/preview": "7.0.0-alpha.53",
-    "@storybook/preview-web": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/source-loader": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "@vitejs/plugin-react": "^2.0.0",

code/lib/builder-vite/src/codegen-iframe-script.ts

@@ -1,4 +1,4 @@
-import { getRendererName, getFrameworkName } from '@storybook/core-common';
+import { getRendererName } from '@storybook/core-common';
 import type { PreviewAnnotation } from '@storybook/types';
 import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
 import type { ExtendedOptions } from './types';
@@ -7,7 +7,6 @@ import { processPreviewAnnotation } from './utils/process-preview-annotation';
 export async function generateIframeScriptCode(options: ExtendedOptions) {
   const { presets } = options;
   const rendererName = await getRendererName(options);
-  const frameworkName = await getFrameworkName(options);
 
   const previewAnnotations = await presets.apply<PreviewAnnotation[]>(
     'previewAnnotations',
@@ -29,8 +28,11 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
     // Ensure that the client API is initialized by the framework before any other iframe code
     // is loaded. That way our client-apis can assume the existence of the API+store
     import { configure } from '${rendererName}';
-    import { clientApi } from '${frameworkName}';
+
+    import { logger } from '@storybook/client-logger';
+    import * as clientApi from "@storybook/preview-api";
     ${filesToImport(configEntries, 'config')}
+
     import * as preview from '${virtualPreviewFile}';
     import { configStories } from '${virtualStoriesFile}';
 
@@ -44,7 +46,7 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
       addArgTypesEnhancer,
       addArgsEnhancer,
       setGlobalRender,
-    } = clientApi;
+    } = previewApi;
 
     const configs = [${importArray('config', configEntries.length)
       .concat('preview.default')

code/lib/builder-vite/src/optimizeDeps.ts

@@ -15,13 +15,16 @@ const INCLUDE_CANDIDATES = [
   '@mdx-js/react',
   '@storybook/addon-docs > acorn-jsx',
   '@storybook/addon-docs',
-  '@storybook/addons',
+  '@storybook/preview-api',
   '@storybook/channel-postmessage',
   '@storybook/channel-websocket',
   '@storybook/client-api',
+  '@storybook/preview-api',
   '@storybook/client-logger',
   '@storybook/core/client',
   '@storybook/types',
+  '@storybook/preview-api',
+  '@storybook/preview-api',
   '@storybook/preview-web',
   '@storybook/react > acorn-jsx',
   '@storybook/react',

code/lib/builder-webpack5/package.json

@@ -53,7 +53,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.12.10",
     "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/api": "7.0.0-alpha.53",
     "@storybook/channel-postmessage": "7.0.0-alpha.53",
@@ -67,7 +67,7 @@
     "@storybook/core-webpack": "7.0.0-alpha.53",
     "@storybook/node-logger": "7.0.0-alpha.53",
     "@storybook/preview": "7.0.0-alpha.53",
-    "@storybook/preview-web": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/router": "7.0.0-alpha.53",
     "@storybook/store": "7.0.0-alpha.53",
     "@storybook/theming": "7.0.0-alpha.53",

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

@@ -143,7 +143,7 @@ export default async (
 
     previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => {
       if (!previewAnnotationFilename) return;
-      const clientApi = storybookPaths['@storybook/client-api'];
+      const previewApi = storybookPaths['@storybook/preview-api'];
       const clientLogger = storybookPaths['@storybook/client-logger'];
 
       // Ensure that relative paths end up mapped to a filename in the cwd, so a later import
@@ -155,7 +155,7 @@ export default async (
       // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
       virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {
         previewAnnotationFilename,
-        clientApi,
+        previewApi,
         clientLogger,
       });
       entries.push(entryFilename);
@@ -209,16 +209,14 @@ export default async (
     externals: {
       ...[
         // these packages are pre-bundled, so they are mapped to global shims
-        'channels',
+        // at some point this should only be a single package: preview-api
+        'addons',
         'channel-postmessage',
         'channel-websocket',
-        'core-events',
+        'channels',
         'client-logger',
-        'addons',
+        'core-events',
-        'store',
+        'preview-api',
-        'preview-web',
-        'client-api',
-        'core-client',
       ].reduce(
         (acc, sbPackage) => ({
           ...acc,

code/lib/builder-webpack5/templates/virtualModuleEntry.template.js

@@ -9,7 +9,7 @@ import {
   addArgsEnhancer,
   addArgTypesEnhancer,
   setGlobalRender,
-} from '{{clientApi}}';
+} from '{{previewApi}}';
 import * as previewAnnotations from '{{previewAnnotationFilename}}';
 
 Object.keys(previewAnnotations).forEach((key) => {

code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars

@@ -1,9 +1,6 @@
 import global from 'global';
 
-import { PreviewWeb } from '@storybook/preview-web';
+import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api';
-import { composeConfigs } from '@storybook/store';
-import { ClientApi } from '@storybook/client-api';
-import { addons } from '@storybook/addons';
 import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
 import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
 

code/lib/cli/src/js-package-manager/JsPackageManager.ts

@@ -132,7 +132,7 @@ export abstract class JsPackageManager {
    *   `@storybook/react@${storybookVersion}`,
    *   `@storybook/addon-actions@${actionsVersion}`,
    *   `@storybook/addon-links@${linksVersion}`,
-   *   `@storybook/addons@${addonsVersion}`,
+   *   `@storybook/preview-api@${addonsVersion}`,
    * ]);
    */
   public addDependencies(

code/lib/cli/src/js-package-manager/NPMProxy.test.ts

@@ -63,27 +63,27 @@ describe('NPM Proxy', () => {
 
   describe('addDependencies', () => {
     describe('npm6', () => {
-      it('with devDep it should run `npm install -D @storybook/addons`', () => {
+      it('with devDep it should run `npm install -D @storybook/preview-api`', () => {
         const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('6.0.0');
 
-        npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+        npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
         expect(executeCommandSpy).toHaveBeenLastCalledWith(
           'npm',
-          ['install', '-D', '@storybook/addons'],
+          ['install', '-D', '@storybook/preview-api'],
           expect.any(String)
         );
       });
     });
     describe('npm7', () => {
-      it('with devDep it should run `npm install -D @storybook/addons`', () => {
+      it('with devDep it should run `npm install -D @storybook/preview-api`', () => {
         const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('7.0.0');
 
-        npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+        npmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
         expect(executeCommandSpy).toHaveBeenLastCalledWith(
           'npm',
-          ['install', '--legacy-peer-deps', '-D', '@storybook/addons'],
+          ['install', '--legacy-peer-deps', '-D', '@storybook/preview-api'],
           expect.any(String)
         );
       });
@@ -92,27 +92,27 @@ describe('NPM Proxy', () => {
 
   describe('removeDependencies', () => {
     describe('npm6', () => {
-      it('with devDep it should run `npm uninstall @storybook/addons`', () => {
+      it('with devDep it should run `npm uninstall @storybook/preview-api`', () => {
         const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('6.0.0');
 
-        npmProxy.removeDependencies({}, ['@storybook/addons']);
+        npmProxy.removeDependencies({}, ['@storybook/preview-api']);
 
         expect(executeCommandSpy).toHaveBeenLastCalledWith(
           'npm',
-          ['uninstall', '@storybook/addons'],
+          ['uninstall', '@storybook/preview-api'],
           expect.any(String)
         );
       });
     });
     describe('npm7', () => {
-      it('with devDep it should run `npm uninstall @storybook/addons`', () => {
+      it('with devDep it should run `npm uninstall @storybook/preview-api`', () => {
         const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('7.0.0');
 
-        npmProxy.removeDependencies({}, ['@storybook/addons']);
+        npmProxy.removeDependencies({}, ['@storybook/preview-api']);
 
         expect(executeCommandSpy).toHaveBeenLastCalledWith(
           'npm',
-          ['uninstall', '--legacy-peer-deps', '@storybook/addons'],
+          ['uninstall', '--legacy-peer-deps', '@storybook/preview-api'],
           expect.any(String)
         );
       });
@@ -151,11 +151,11 @@ describe('NPM Proxy', () => {
     it('without constraint it returns the latest version', async () => {
       const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('"5.3.19"');
 
-      const version = await npmProxy.latestVersion('@storybook/addons');
+      const version = await npmProxy.latestVersion('@storybook/preview-api');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('npm', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'version',
         '--json',
       ]);
@@ -167,11 +167,11 @@ describe('NPM Proxy', () => {
         .spyOn(npmProxy, 'executeCommand')
         .mockReturnValue('["4.25.3","5.3.19","6.0.0-beta.23"]');
 
-      const version = await npmProxy.latestVersion('@storybook/addons', '5.X');
+      const version = await npmProxy.latestVersion('@storybook/preview-api', '5.X');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('npm', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'versions',
         '--json',
       ]);
@@ -181,7 +181,7 @@ describe('NPM Proxy', () => {
     it('throws an error if command output is not a valid JSON', async () => {
       jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('NOT A JSON');
 
-      await expect(npmProxy.latestVersion('@storybook/addons')).rejects.toThrow();
+      await expect(npmProxy.latestVersion('@storybook/preview-api')).rejects.toThrow();
     });
   });
 

code/lib/cli/src/js-package-manager/PNPMProxy.test.ts

@@ -47,28 +47,28 @@ describe('NPM Proxy', () => {
   });
 
   describe('addDependencies', () => {
-    it('with devDep it should run `pnpm add -D @storybook/addons`', () => {
+    it('with devDep it should run `pnpm add -D @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('6.0.0');
 
-      pnpmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+      pnpmProxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenLastCalledWith(
         'pnpm',
-        ['add', '-D', '@storybook/addons'],
+        ['add', '-D', '@storybook/preview-api'],
         expect.any(String)
       );
     });
   });
 
   describe('removeDependencies', () => {
-    it('with devDep it should run `npm uninstall @storybook/addons`', () => {
+    it('with devDep it should run `npm uninstall @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('6.0.0');
 
-      pnpmProxy.removeDependencies({}, ['@storybook/addons']);
+      pnpmProxy.removeDependencies({}, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenLastCalledWith(
         'pnpm',
-        ['remove', '@storybook/addons'],
+        ['remove', '@storybook/preview-api'],
         expect.any(String)
       );
     });
@@ -107,11 +107,11 @@ describe('NPM Proxy', () => {
     it('without constraint it returns the latest version', async () => {
       const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('"5.3.19"');
 
-      const version = await pnpmProxy.latestVersion('@storybook/addons');
+      const version = await pnpmProxy.latestVersion('@storybook/preview-api');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('pnpm', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'version',
         '--json',
       ]);
@@ -123,11 +123,11 @@ describe('NPM Proxy', () => {
         .spyOn(pnpmProxy, 'executeCommand')
         .mockReturnValue('["4.25.3","5.3.19","6.0.0-beta.23"]');
 
-      const version = await pnpmProxy.latestVersion('@storybook/addons', '5.X');
+      const version = await pnpmProxy.latestVersion('@storybook/preview-api', '5.X');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('pnpm', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'versions',
         '--json',
       ]);
@@ -137,7 +137,7 @@ describe('NPM Proxy', () => {
     it('throws an error if command output is not a valid JSON', async () => {
       jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('NOT A JSON');
 
-      await expect(pnpmProxy.latestVersion('@storybook/addons')).rejects.toThrow();
+      await expect(pnpmProxy.latestVersion('@storybook/preview-api')).rejects.toThrow();
     });
   });
 

code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts

@@ -47,28 +47,28 @@ describe('Yarn 1 Proxy', () => {
   });
 
   describe('addDependencies', () => {
-    it('with devDep it should run `yarn install -D --ignore-workspace-root-check @storybook/addons`', () => {
+    it('with devDep it should run `yarn install -D --ignore-workspace-root-check @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('');
 
-      yarn1Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+      yarn1Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenCalledWith(
         'yarn',
-        ['add', '-D', '--ignore-workspace-root-check', '@storybook/addons'],
+        ['add', '-D', '--ignore-workspace-root-check', '@storybook/preview-api'],
         expect.any(String)
       );
     });
   });
 
   describe('removeDependencies', () => {
-    it('should run `yarn remove --ignore-workspace-root-check @storybook/addons`', () => {
+    it('should run `yarn remove --ignore-workspace-root-check @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('');
 
-      yarn1Proxy.removeDependencies({}, ['@storybook/addons']);
+      yarn1Proxy.removeDependencies({}, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenCalledWith(
         'yarn',
-        ['remove', '--ignore-workspace-root-check', '@storybook/addons'],
+        ['remove', '--ignore-workspace-root-check', '@storybook/preview-api'],
         expect.any(String)
       );
     });
@@ -107,11 +107,11 @@ describe('Yarn 1 Proxy', () => {
         .spyOn(yarn1Proxy, 'executeCommand')
         .mockReturnValue('{"type":"inspect","data":"5.3.19"}');
 
-      const version = await yarn1Proxy.latestVersion('@storybook/addons');
+      const version = await yarn1Proxy.latestVersion('@storybook/preview-api');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'version',
         '--json',
       ]);
@@ -123,11 +123,11 @@ describe('Yarn 1 Proxy', () => {
         .spyOn(yarn1Proxy, 'executeCommand')
         .mockReturnValue('{"type":"inspect","data":["4.25.3","5.3.19","6.0.0-beta.23"]}');
 
-      const version = await yarn1Proxy.latestVersion('@storybook/addons', '5.X');
+      const version = await yarn1Proxy.latestVersion('@storybook/preview-api', '5.X');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         'versions',
         '--json',
       ]);
@@ -137,7 +137,7 @@ describe('Yarn 1 Proxy', () => {
     it('throws an error if command output is not a valid JSON', async () => {
       jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('NOT A JSON');
 
-      await expect(yarn1Proxy.latestVersion('@storybook/addons')).rejects.toThrow();
+      await expect(yarn1Proxy.latestVersion('@storybook/preview-api')).rejects.toThrow();
     });
   });
 

code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts

@@ -47,28 +47,28 @@ describe('Yarn 2 Proxy', () => {
   });
 
   describe('addDependencies', () => {
-    it('with devDep it should run `yarn install -D @storybook/addons`', () => {
+    it('with devDep it should run `yarn install -D @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('');
 
-      yarn2Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/addons']);
+      yarn2Proxy.addDependencies({ installAsDevDependencies: true }, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenCalledWith(
         'yarn',
-        ['add', '-D', '@storybook/addons'],
+        ['add', '-D', '@storybook/preview-api'],
         expect.any(String)
       );
     });
   });
 
   describe('removeDependencies', () => {
-    it('should run `yarn remove @storybook/addons`', () => {
+    it('should run `yarn remove @storybook/preview-api`', () => {
       const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('');
 
-      yarn2Proxy.removeDependencies({}, ['@storybook/addons']);
+      yarn2Proxy.removeDependencies({}, ['@storybook/preview-api']);
 
       expect(executeCommandSpy).toHaveBeenCalledWith(
         'yarn',
-        ['remove', '@storybook/addons'],
+        ['remove', '@storybook/preview-api'],
         expect.any(String)
       );
     });
@@ -105,14 +105,14 @@ describe('Yarn 2 Proxy', () => {
     it('without constraint it returns the latest version', async () => {
       const executeCommandSpy = jest
         .spyOn(yarn2Proxy, 'executeCommand')
-        .mockReturnValue('{"name":"@storybook/addons","version":"5.3.19"}');
+        .mockReturnValue('{"name":"@storybook/preview-api","version":"5.3.19"}');
 
-      const version = await yarn2Proxy.latestVersion('@storybook/addons');
+      const version = await yarn2Proxy.latestVersion('@storybook/preview-api');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [
         'npm',
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         '--fields',
         'version',
         '--json',
@@ -124,15 +124,15 @@ describe('Yarn 2 Proxy', () => {
       const executeCommandSpy = jest
         .spyOn(yarn2Proxy, 'executeCommand')
         .mockReturnValue(
-          '{"name":"@storybook/addons","versions":["4.25.3","5.3.19","6.0.0-beta.23"]}'
+          '{"name":"@storybook/preview-api","versions":["4.25.3","5.3.19","6.0.0-beta.23"]}'
         );
 
-      const version = await yarn2Proxy.latestVersion('@storybook/addons', '5.X');
+      const version = await yarn2Proxy.latestVersion('@storybook/preview-api', '5.X');
 
       expect(executeCommandSpy).toHaveBeenCalledWith('yarn', [
         'npm',
         'info',
-        '@storybook/addons',
+        '@storybook/preview-api',
         '--fields',
         'versions',
         '--json',
@@ -143,7 +143,7 @@ describe('Yarn 2 Proxy', () => {
     it('throws an error if command output is not a valid JSON', async () => {
       jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('NOT A JSON');
 
-      await expect(yarn2Proxy.latestVersion('@storybook/addons')).rejects.toThrow();
+      await expect(yarn2Proxy.latestVersion('@storybook/preview-api')).rejects.toThrow();
     });
   });
 

code/lib/cli/src/versions.ts

@@ -56,6 +56,8 @@ export default {
   '@storybook/preset-vue-webpack': '7.0.0-alpha.53',
   '@storybook/preset-vue3-webpack': '7.0.0-alpha.53',
   '@storybook/preset-web-components-webpack': '7.0.0-alpha.53',
+  '@storybook/preview': '7.0.0-alpha.53',
+  '@storybook/preview-api': '7.0.0-alpha.53',
   '@storybook/preview-web': '7.0.0-alpha.53',
   '@storybook/react': '7.0.0-alpha.53',
   '@storybook/react-vite': '7.0.0-alpha.53',

code/lib/cli/src/window.d.ts

@@ -1,5 +1,5 @@
 import type { Renderer } from '@storybook/types';
-import type { StoryStore } from '@storybook/client-api';
+import type { StoryStore } from '@storybook/preview-api';
 
 declare global {
   interface Window {

code/lib/client-api/README.md

@@ -1,16 +1,3 @@
-# `@storybook/client-api` -- Deprecated Story APIs (`storiesOf`)
+The contents of this package have moved to `@storybook/preview-api`. Please update your import.
 
-**NOTE** This API is deprecated, and the CSF format is preferred for all stories.
+This package will no longer be released as part of the 8.0 release of storybook.
-
-## `storiesOf` API
-
-The `@storybook/client` API provides the [`storiesOf()` API](../core/docs/storiesOf.md), which is proxied through to the CSF API.
-
-### Internals
-
-In order to appear to the store like the CSF API, a call to `storiesOf().add()` does the following:
-
-- Tracks the story added in a synthetic `StoryIndex` data structure
-- Constructs a `moduleExports` object that is equivalent to the exports from a CSF file that produced the same stories.
-
-In order to achieve the old `storySort` functionality, the client API also needs access to the project annotations.

code/lib/client-api/package.json

@@ -22,15 +22,15 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "require": "./dist/index.js",
+      "require": "./dist/entry.js",
-      "import": "./dist/index.mjs",
+      "import": "./dist/entry.mjs",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/entry.d.ts"
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
+  "main": "dist/entry.js",
-  "module": "dist/index.mjs",
+  "module": "dist/entry.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/entry.d.ts",
   "files": [
     "dist/**/*",
     "README.md",
@@ -39,37 +39,20 @@
   ],
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "prep": "../../../scripts/prepare/facade.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
-    "@storybook/csf": "next",
+    "@storybook/preview-api": "7.0.0-alpha.53"
-    "@storybook/store": "7.0.0-alpha.53",
-    "@storybook/types": "7.0.0-alpha.53",
-    "@types/qs": "^6.9.5",
-    "@types/webpack-env": "^1.16.4",
-    "global": "^4.4.0",
-    "qs": "^6.10.0",
-    "synchronous-promise": "^2.0.15",
-    "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "@storybook/core-common": "7.0.0-alpha.53",
-    "typescript": "^4.9.3"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
     "entries": [
-      "./src/index.ts"
+      "./src/entry.ts"
-    ]
+    ],
+    "shim": "@storybook/preview-api/dist/client-api"
   },
   "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23"
 }

code/lib/client-api/src/entry.ts

@@ -0,0 +1,7 @@
+import { deprecate } from '@storybook/client-logger';
+
+deprecate(
+  'importing from @storybook/client-api is deprecated and will be removed in 8.0, please import canvas related modules from @storybook/preview-api'
+);
+
+export * from '@storybook/preview-api/dist/client-api';

code/lib/codemod/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.snapshot

@@ -2,7 +2,7 @@
 
 exports[`update-organisation-name transforms correctly using "update-organisation-name.input.js" data 1`] = `
 "/* eslint-disable */
-import '@storybook/addons';
+import '@storybook/preview-api';
 import '@storybook/addon-comments';
 import '@storybook/addon-centered';
 import '@storybook/addon-graphql';

code/lib/codemod/src/transforms/update-organisation-name.js

@@ -1,6 +1,6 @@
 export const packageNames = {
   '@kadira/react-storybook-decorator-centered': '@storybook/addon-centered',
-  '@kadira/storybook-addons': '@storybook/addons',
+  '@kadira/storybook-addons': '@storybook/preview-api',
   '@kadira/storybook-addon-actions': '@storybook/addon-actions',
   '@kadira/storybook-addon-comments': '@storybook/addon-comments',
   '@kadira/storybook-addon-graphql': '@storybook/addon-graphql',

code/lib/core-client/README.md

@@ -1,14 +1,3 @@
-# Storybook Core-Client
+The contents of this package have moved to `@storybook/preview-api`. Please update your import.
 
-This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue, Ember, Angular, etc) in the old "v6" story store back-compatibility layer.
+This package will no longer be released as part of the 8.0 release of storybook.
-
-A framework calls the `start(renderToCanvas, { render, decorateStory })` function and provides:
-
-- The `renderToCanvas` function, which tells Storybook how to render the result of a story function to the DOM
-- The `render` function, which is a default mapping of `args` to a story result in CSFv3
-- The `decorateStory` function, which tells Storybook how to combine decorators in the framework.
-
-The `start` function will return a `configure()` function, which can be re-exported to be used in `preview.js` (deprecated), or automatically by the `main.js:stories` field to:
-
-- return a list of CSF files
-- [deprecated] make calls to the `storiesOf` API.

code/lib/core-client/package.json

@@ -21,49 +21,31 @@
   "license": "MIT",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
+      "require": "./dist/entry.js",
-      "import": "./dist/index.mjs",
+      "import": "./dist/entry.mjs",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/entry.d.ts"
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
+  "main": "dist/entry.js",
-  "module": "dist/index.mjs",
+  "module": "dist/entry.mjs",
-  "types": "dist/index.d.ts",
+  "types": "dist/entry.d.ts",
   "scripts": {
     "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "../../../scripts/prepare/bundle.ts"
+    "prep": "../../../scripts/prepare/facade.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.53",
-    "@storybook/channel-postmessage": "7.0.0-alpha.53",
-    "@storybook/channel-websocket": "7.0.0-alpha.53",
-    "@storybook/channels": "7.0.0-alpha.53",
-    "@storybook/client-api": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
-    "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53"
-    "@storybook/csf": "next",
-    "@storybook/preview-web": "7.0.0-alpha.53",
-    "@storybook/store": "7.0.0-alpha.53",
-    "@storybook/types": "7.0.0-alpha.53",
-    "global": "^4.4.0",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "typescript": "^4.9.3"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
   },
   "publishConfig": {
     "access": "public"
   },
   "bundler": {
     "entries": [
-      "./src/index.ts"
+      "./src/entry.ts"
-    ]
+    ],
+    "shim": "@storybook/preview-api/dist/core-client"
   },
   "gitHead": "fd1cf81615a5ddac3369e7bb567a1a43081fdc23"
 }

code/lib/core-client/src/entry.ts

@@ -0,0 +1,7 @@
+import { deprecate } from '@storybook/client-logger';
+
+deprecate(
+  'importing from @storybook/core-client is deprecated and will be removed in 8.0, please import canvas related modules from @storybook/preview-api'
+);
+
+export * from '@storybook/preview-api/dist/core-client';

code/lib/core-client/src/index.ts

@@ -1,5 +0,0 @@
-import { ClientApi } from '@storybook/client-api';
-import { StoryStore } from '@storybook/store';
-import { start } from './start';
-
-export { start, ClientApi, StoryStore };

code/lib/core-client/typings.d.ts

@@ -1,5 +1,3 @@
-declare module '@storybook/preview-web/dist/cjs/PreviewWeb.mockdata';
-
 declare class AnsiToHtml {
   constructor(options: { escapeHtml: boolean });
 

code/lib/core-server/package.json

@@ -36,14 +36,13 @@
     "@aw-web-design/x-default-browser": "1.4.88",
     "@discoveryjs/json-ext": "^0.5.3",
     "@storybook/builder-manager": "7.0.0-alpha.53",
-    "@storybook/core-client": "7.0.0-alpha.53",
     "@storybook/core-common": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
     "@storybook/csf": "next",
     "@storybook/csf-tools": "7.0.0-alpha.53",
     "@storybook/docs-mdx": "next",
     "@storybook/node-logger": "7.0.0-alpha.53",
-    "@storybook/store": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/telemetry": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "@types/node": "^16.0.0",

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -19,7 +19,7 @@ import type {
   StoryId,
   StoryName,
 } from '@storybook/types';
-import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/store';
+import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
 import { normalizeStoryPath } from '@storybook/core-common';
 import { logger } from '@storybook/node-logger';
 import { getStorySortParameter, NoMetaError } from '@storybook/csf-tools';

code/lib/docs-tools/package.json

@@ -42,9 +42,9 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.12.10",
     "@storybook/core-common": "7.0.0-alpha.53",
-    "@storybook/store": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "@storybook/types": "7.0.0-alpha.53",
     "doctrine": "^3.0.0",
     "lodash": "^4.17.21"

code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts

@@ -1,5 +1,5 @@
 import type { Renderer, StoryContextForEnhancers } from '@storybook/types';
-import { combineParameters } from '@storybook/store';
+import { combineParameters } from '@storybook/preview-api';
 
 export const enhanceArgTypes = <TRenderer extends Renderer>(
   context: StoryContextForEnhancers<TRenderer>

code/lib/instrumenter/package.json

@@ -46,6 +46,7 @@
     "@storybook/channels": "7.0.0-alpha.53",
     "@storybook/client-logger": "7.0.0-alpha.53",
     "@storybook/core-events": "7.0.0-alpha.53",
+    "@storybook/preview-api": "7.0.0-alpha.53",
     "core-js": "^3.8.2",
     "global": "^4.4.0"
   },

code/lib/instrumenter/src/instrumenter.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import type { Channel } from '@storybook/channels';
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/preview-api';
 import type { StoryId } from '@storybook/types';
 import { once, logger } from '@storybook/client-logger';
 import {

code/lib/postinstall/src/frameworks.test.ts

@@ -9,7 +9,7 @@ const VUE = {
 };
 
 const NONE = {
-  '@storybook/addons': '5.2.5',
+  '@storybook/preview-api': '5.2.5',
   lodash: '^4.17.15',
 };
 

code/lib/preview-api/README-client-api.md

@@ -0,0 +1,16 @@
+# `@storybook/client-api` -- Deprecated Story APIs (`storiesOf`)
+
+**NOTE** This API is deprecated, and the CSF format is preferred for all stories.
+
+## `storiesOf` API
+
+The `@storybook/client` API provides the [`storiesOf()` API](../core/docs/storiesOf.md), which is proxied through to the CSF API.
+
+### Internals
+
+In order to appear to the store like the CSF API, a call to `storiesOf().add()` does the following:
+
+- Tracks the story added in a synthetic `StoryIndex` data structure
+- Constructs a `moduleExports` object that is equivalent to the exports from a CSF file that produced the same stories.
+
+In order to achieve the old `storySort` functionality, the client API also needs access to the project annotations.

code/lib/preview-api/README-core-client.md

@@ -0,0 +1,14 @@
+# Storybook Core-Client
+
+This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue, Ember, Angular, etc) in the old "v6" story store back-compatibility layer.
+
+A framework calls the `start(renderToCanvas, { render, decorateStory })` function and provides:
+
+- The `renderToCanvas` function, which tells Storybook how to render the result of a story function to the DOM
+- The `render` function, which is a default mapping of `args` to a story result in CSFv3
+- The `decorateStory` function, which tells Storybook how to combine decorators in the framework.
+
+The `start` function will return a `configure()` function, which can be re-exported to be used in `preview.js` (deprecated), or automatically by the `main.js:stories` field to:
+
+- return a list of CSF files
+- [deprecated] make calls to the `storiesOf` API.

code/lib/preview-api/README-preview-web.md

@@ -0,0 +1,94 @@
+# Preview (Web)
+
+This is the main API for the (web) version of the Storybook Preview.
+
+The preview's job is:
+
+1. Read and update the URL (via the URL Store)
+
+2. Listen to instructions on the channel and emit events as things occur.
+
+3. Render the current selection to the web view in either story or docs mode.
+
+## V7 Store vs Legacy (V6)
+
+The story store is designed to load stories 'on demand', and will operate in this fashion if the `storyStoreV7` feature is enabled.
+
+However, for back-compat reasons, in v6 mode, we need to load all stories, synchronously on bootup, emitting the `SET_STORIES` event.
+
+In V7 mode we do not emit that event, instead preferring the `STORY_PREPARED` event, with the data for the single story being rendered.
+
+## Initialization
+
+The preview is `initialized` in two ways.
+
+### V7 Mode:
+
+- `importFn` - is an async `import()` function
+
+- `getProjectAnnotations` - is a simple function that evaluations `preview.js` and addon config files and combines them. If it errors, the Preview will show the error.
+
+- No `getStoryIndex` function is passed, instead the preview creates a `StoryIndexClient` that pulls `stories.json` from node and watches the event stream for invalidation events.
+
+### V6 Mode
+
+- `importFn` - is a simulated `import()` function, that is synchronous, see `client-api` for details.
+- `getProjectAnnotations` - also evaluates `preview.js` et al, but watches for calls to `setStories`, and passes them to the `ClientApi`
+- `getStoryIndex` is a local function (that must be called _after_ `getProjectAnnotations`) that gets the list of stories added.
+
+See `client-api` for more details on this process.
+
+## Story Rendering and interruptions
+
+The Preview is split into three parts responsible for state management:
+
+- `PreviewWeb` - which story is rendered, receives events and (maybe) changes/re-renders stories
+- `StoryRender` - (imports +) prepares the story, renders it through the various phases
+- `DocsRender` - if a story renders in docs mode, it is "transformed" into a `DocsRender` once we know.
+
+A rendering story goes through these phases:
+
+- `preparing` - (maybe async) import the story file and prepare the story function.
+- `loading` - async loaders are running
+- `rendering` - the `renderToDOM` function for the framework is running
+- `playing` - the `play` function is running
+- `completed` - the story is done.
+
+It also has two error states:
+
+- `aborted` - the story was stopped midway (see below)
+- `errored` - there was an error thrown somewhere along the way.
+
+### Re-rendering and aborting
+
+A story may re-render due to various events, which can have implications if the story is not in the `completed` phase:
+
+- `UPDATE_STORY_ARGS` / `UPDATE_GLOBALS` -- change of inputs
+- `FORCE_RE_RENDER` - re-render unchanged
+
+If these events happen during a render:
+
+- if the story is `preparing` or `loading`, leave thing unchanged and let the new `args`/`globals` be picked up by the render phase
+- otherwise, use the result of the previous `loaders` run, and simply re-render over the top
+
+- `FORCE_REMOUNT` - remount (or equivalent) the component and re-render.
+
+If this happens during a render, treat `loading` similarly, but:
+
+- if the story is `rendering`, start a new render and abort the previous render immediately afterwards
+- if the story is `playing`, attempt to abort the previous play function, and start a new render.
+
+### Changing story
+
+Also the `SET_CURRENT_STORY` event may change the current story. We need to check:
+
+- If the `storyId` changed
+- If the `viewMode` changed
+- If the story implementation changed (i.e if HMR occurred).
+
+If the _previous_ story is still `preparing`, we cannot know if the implementation changed, so we
+abort the preparing immediately, and let the new story take over.
+
+Otherwise, if all of the above are the same, we do nothing.
+
+If they are different, and the old story is not `completed`, we try to abort it immediately. If that fails (e.g. the `play` function doesn't respond to the `abort` event), then we reload the window.