storybookjs · shilman · Sep 14, 2021 · Aug 13, 2021 · Aug 13, 2021 · Aug 14, 2021
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,7 +1,9 @@
 <h1>Migration</h1>
 
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
+  - [Story Store v7](#story-store-v7)
   - [Babel mode v7](#babel-mode-v7)
+  - [Loader behavior with args changes](#loader-behaviour-with-args-changes)
 - [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
   - [Webpack 5 manager build](#webpack-5-manager-build)
   - [Angular 12 upgrade](#angular-12-upgrade)
@@ -166,6 +168,42 @@
 
 ## From version 6.3.x to 6.4.0
 
+### Story Store v7
+
+SB6.4 introduces an opt-in feature flag, `features.storyStoreV7`, which loads stories in an "on demand" way (that is when rendered), rather than up front when the Storybook is booted. This way of operating will become the default in 7.0 and will likely be switched to opt-out in that version.
+
+The key benefit of the on demand store is that stories are code-split automatically (in `builder-webpack4` and `builder-webpack5`), which allows for much smaller bundle sizes, faster rendering, and improved general performance via various opt-in Webpack features.
+
+The on-demand store relies on the "story index" data structure which is generated in the server (node) via static code analysis. As such, it has the following limitations:
+
+- Does not work with `storiesOf()`
+- Does not work if you used dynamic story names or component titles.
+
+However, the `autoTitle` feature is supported.
+
+#### Behavioral differences
+
+The key behavioral differences of the v7 store are:
+
+- `SET_STORIES` is not emitted on boot up. Instead the manager loads the story index independenly.
+- A new event `STORY_PREPARED` is emitted when a story is rendered for the first time, which contains metadata about the story, such as `parameters`.
+- All "entire" store APIs such as `extract()` need to be proceeded by an async call to `loadAllCSFFiles()` which fetches all CSF files and processes them.
+
+#### Using the v7 store
+
+To activate the v7 mode set the feature flag in your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  // ... your existing config
+  features: {
+    storyStoreV7: true,
+  },
+};
+```
+
+NOTE: `features.storyStoreV7` implies `features.buildStoriesJson` and has the same limitations.
+
 ### Babel mode v7
 
 SB6.4 introduces an opt-in feature flag, `features.babelModeV7`, that reworks the way Babel is configured in Storybook to make it more consistent with the Babel is configured in your app. This breaking change will become the default in SB 7.0, but we encourage you to migrate today.
@@ -197,6 +235,10 @@ npx sb@next babelrc
 
 This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly.
 
+### Loader behavior with args changes
+
+In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders do not re-run. Instead the previous value of the loader in passed to the story, irrespective of the new args.
+
 ## From version 6.2.x to 6.3.0
 
 ### Webpack 5 manager build

diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -48,10 +48,10 @@
     "@storybook/addons": "6.4.0-alpha.34",
     "@storybook/api": "6.4.0-alpha.34",
     "@storybook/channels": "6.4.0-alpha.34",
-    "@storybook/client-api": "6.4.0-alpha.34",
     "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.68887a1.0",
     "@storybook/theming": "6.4.0-alpha.34",
     "axe-core": "^4.2.0",
     "core-js": "^3.8.2",

diff --git a/addons/a11y/src/index.ts b/addons/a11y/src/index.ts
@@ -1,4 +1,4 @@
-import { DecoratorFunction } from '@storybook/addons';
+import { AnyFramework, DecoratorFunction } from '@storybook/csf';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 
@@ -9,7 +9,7 @@ if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }
 
-export const withA11y: DecoratorFunction = deprecate(
+export const withA11y: DecoratorFunction<AnyFramework> = deprecate(
   (storyFn, storyContext) => {
     return storyFn(storyContext);
   },

diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -43,9 +43,9 @@
   "dependencies": {
     "@storybook/addons": "6.4.0-alpha.34",
     "@storybook/api": "6.4.0-alpha.34",
-    "@storybook/client-api": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.68887a1.0",
     "@storybook/theming": "6.4.0-alpha.34",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",

diff --git a/addons/actions/src/preset/addArgsHelpers.test.ts b/addons/actions/src/preset/addArgsHelpers.test.ts
@@ -8,7 +8,7 @@ describe('actions parameter enhancers', () => {
 
     it('should add actions that match a pattern', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: {},
+        initialArgs: {},
         argTypes,
         parameters,
       } as unknown) as StoryContext);
@@ -20,7 +20,7 @@ describe('actions parameter enhancers', () => {
 
     it('should NOT override pre-existing args', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: { onClick: 'pre-existing value' },
+        initialArgs: { onClick: 'pre-existing value' },
         argTypes,
         parameters,
       } as unknown) as StoryContext);
@@ -29,7 +29,7 @@ describe('actions parameter enhancers', () => {
 
     it('should NOT override pre-existing args, if null', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: { onClick: null },
+        initialArgs: { onClick: null },
         argTypes,
         parameters,
       } as unknown) as StoryContext);
@@ -38,7 +38,7 @@ describe('actions parameter enhancers', () => {
 
     it('should override pre-existing args, if undefined', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: { onClick: undefined },
+        initialArgs: { onClick: undefined },
         argTypes,
         parameters,
       } as unknown) as StoryContext);
@@ -47,7 +47,7 @@ describe('actions parameter enhancers', () => {
 
     it('should do nothing if actions are disabled', () => {
       const args = inferActionsFromArgTypesRegex(({
-        args: {},
+        initialArgs: {},
         argTypes,
         parameters: {
           ...parameters,
@@ -65,7 +65,11 @@ describe('actions parameter enhancers', () => {
     };
     it('should add actions based on action.args', () => {
       expect(
-        addActionsFromArgTypes(({ args: {}, argTypes, parameters: {} } as unknown) as StoryContext)
+        addActionsFromArgTypes(({
+          initialArgs: {},
+          argTypes,
+          parameters: {},
+        } as unknown) as StoryContext)
       ).toEqual({
         onClick: expect.any(Function),
         onBlur: expect.any(Function),
@@ -76,7 +80,7 @@ describe('actions parameter enhancers', () => {
       expect(
         addActionsFromArgTypes(({
           argTypes: { onClick: { action: 'clicked!' } },
-          args: { onClick: 'pre-existing value' },
+          initialArgs: { onClick: 'pre-existing value' },
           parameters: {},
         } as unknown) as StoryContext)
       ).toEqual({});
@@ -86,7 +90,7 @@ describe('actions parameter enhancers', () => {
       expect(
         addActionsFromArgTypes(({
           argTypes: { onClick: { action: 'clicked!' } },
-          args: { onClick: null },
+          initialArgs: { onClick: null },
           parameters: {},
         } as unknown) as StoryContext)
       ).toEqual({});
@@ -96,7 +100,7 @@ describe('actions parameter enhancers', () => {
       expect(
         addActionsFromArgTypes(({
           argTypes: { onClick: { action: 'clicked!' } },
-          args: { onClick: undefined },
+          initialArgs: { onClick: undefined },
           parameters: {},
         } as unknown) as StoryContext)
       ).toEqual({ onClick: expect.any(Function) });
@@ -105,7 +109,7 @@ describe('actions parameter enhancers', () => {
     it('should do nothing if actions are disabled', () => {
       expect(
         addActionsFromArgTypes(({
-          args: {},
+          initialArgs: {},
           argTypes,
           parameters: { actions: { disable: true } },
         } as unknown) as StoryContext)

diff --git a/addons/actions/src/preset/addArgsHelpers.ts b/addons/actions/src/preset/addArgsHelpers.ts
@@ -1,5 +1,5 @@
 import { Args } from '@storybook/addons';
-import { ArgsEnhancer } from '@storybook/client-api';
+import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
 import { action } from '../index';
 
 // interface ActionsParameter {
@@ -12,9 +12,9 @@ import { action } from '../index';
  * matches a regex, such as `^on.*` for react-style `onClick` etc.
  */
 
-export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (context) => {
   const {
-    args,
+    initialArgs,
     argTypes,
     parameters: { actions },
   } = context;
@@ -28,7 +28,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
   );
 
   return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
-    if (typeof args[name] === 'undefined') {
+    if (typeof initialArgs[name] === 'undefined') {
       acc[name] = action(name);
     }
     return acc;
@@ -38,9 +38,9 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) => {
 /**
  * Add action args for list of strings.
  */
-export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
+export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
   const {
-    args,
+    initialArgs,
     argTypes,
     parameters: { actions },
   } = context;
@@ -51,7 +51,7 @@ export const addActionsFromArgTypes: ArgsEnhancer = (context) => {
   const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);
 
   return argTypesWithAction.reduce((acc, [name, argType]) => {
-    if (typeof args[name] === 'undefined') {
+    if (typeof initialArgs[name] === 'undefined') {
       acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
     }
     return acc;

diff --git a/addons/actions/src/preview/withActions.ts b/addons/actions/src/preview/withActions.ts
@@ -1,10 +1,9 @@
 // Based on http://backbonejs.org/docs/backbone.html#section-164
 import global from 'global';
-import { useEffect } from '@storybook/client-api';
+import { useEffect, makeDecorator } from '@storybook/addons';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 
-import { makeDecorator } from '@storybook/addons';
 import { actions } from './actions';
 
 import { PARAM_KEY } from '../constants';

diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
@@ -50,6 +50,7 @@
     "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.68887a1.0",
     "@storybook/theming": "6.4.0-alpha.34",
     "core-js": "^3.8.2",
     "global": "^4.4.0",

diff --git a/addons/backgrounds/src/decorators/withBackground.ts b/addons/backgrounds/src/decorators/withBackground.ts
@@ -1,4 +1,5 @@
-import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/addons';
+import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
@@ -8,7 +9,10 @@ import {
   isReduceMotionEnabled,
 } from '../helpers';
 
-export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
+export const withBackground = (
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
+) => {
   const { globals, parameters } = context;
   const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
   const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];

diff --git a/addons/backgrounds/src/decorators/withGrid.ts b/addons/backgrounds/src/decorators/withGrid.ts
@@ -1,6 +1,7 @@
 import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
-import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
+import { useMemo, useEffect } from '@storybook/addons';
+import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
@@ -15,7 +16,10 @@ const deprecatedCellSizeWarning = deprecate(
   `
 );
 
-export const withGrid = (StoryFn: StoryFunction, context: StoryContext) => {
+export const withGrid = (
+  StoryFn: StoryFunction<AnyFramework>,
+  context: StoryContext<AnyFramework>
+) => {
   const { globals, parameters } = context;
   const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
   const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;

diff --git a/addons/controls/package.json b/addons/controls/package.json
@@ -47,11 +47,14 @@
   "dependencies": {
     "@storybook/addons": "6.4.0-alpha.34",
     "@storybook/api": "6.4.0-alpha.34",
-    "@storybook/client-api": "6.4.0-alpha.34",
+    "@storybook/client-logger": "6.4.0-alpha.34",
     "@storybook/components": "6.4.0-alpha.34",
+    "@storybook/csf": "0.0.2--canary.68887a1.0",
     "@storybook/node-logger": "6.4.0-alpha.34",
+    "@storybook/store": "6.4.0-alpha.34",
     "@storybook/theming": "6.4.0-alpha.34",
     "core-js": "^3.8.2",
+    "lodash": "^4.17.20",
     "ts-dedent": "^2.0.0"
   },
   "peerDependencies": {

diff --git a/addons/docs/package.json b/addons/docs/package.json
@@ -71,11 +71,13 @@
     "@storybook/components": "6.4.0-alpha.34",
     "@storybook/core": "6.4.0-alpha.34",
     "@storybook/core-events": "6.4.0-alpha.34",
-    "@storybook/csf": "0.0.1",
+    "@storybook/csf": "0.0.2--canary.68887a1.0",
     "@storybook/csf-tools": "6.4.0-alpha.34",
     "@storybook/node-logger": "6.4.0-alpha.34",
     "@storybook/postinstall": "6.4.0-alpha.34",
+    "@storybook/preview-web": "6.4.0-alpha.34",
     "@storybook/source-loader": "6.4.0-alpha.34",
+    "@storybook/store": "6.4.0-alpha.34",
     "@storybook/theming": "6.4.0-alpha.34",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
@@ -106,6 +108,7 @@
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
     "@storybook/angular": "6.4.0-alpha.34",
+    "@storybook/html": "6.4.0-alpha.34",
     "@storybook/react": "6.4.0-alpha.34",
     "@storybook/vue": "6.4.0-alpha.34",
     "@storybook/web-components": "6.4.0-alpha.34",
@@ -139,6 +142,8 @@
   },
   "peerDependencies": {
     "@storybook/angular": "6.4.0-alpha.34",
+    "@storybook/html": "6.4.0-alpha.34",
+    "@storybook/react": "6.4.0-alpha.34",
     "@storybook/vue": "6.4.0-alpha.34",
     "@storybook/vue3": "6.4.0-alpha.34",
     "@storybook/web-components": "6.4.0-alpha.34",
@@ -155,6 +160,12 @@
     "@storybook/angular": {
       "optional": true
     },
+    "@storybook/html": {
+      "optional": true
+    },
+    "@storybook/react": {
+      "optional": true
+    },
     "@storybook/vue": {
       "optional": true
     },