Core: rename load to configure (#7576)

Core: rename `load` to `configure`

app/angular/src/client/index.ts

@@ -7,7 +7,6 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';
 
 export { moduleMetadata } from './preview/angular/decorators';

app/angular/src/client/preview/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
-import { ClientStoryApi } from '@storybook/addons';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
 import render from './render';
@@ -10,7 +10,7 @@ const framework = 'angular';
 
 interface ClientApi extends ClientStoryApi<StoryFnAngularReturnType> {
   setAddon(addon: any): void;
-  configure(loaders: () => void, module: NodeModule): void;
+  configure(loader: Loadable, module: NodeModule, framework: string): void;
   getStorybook(): IStorybookSection[];
   clearDecorators(): void;
   forceReRender(): void;
@@ -26,12 +26,11 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   });
 };
 
-export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
+export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
 export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
 export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
 export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
-export const configure: ClientApi['configure'] = api.configApi.configure;
 export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
 export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
 export const raw: ClientApi['raw'] = api.clientApi.raw;

app/ember/src/client/index.js

@@ -7,7 +7,6 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/ember/src/client/preview/index.js

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
 
 export const {
   setAddon,
@@ -16,7 +16,6 @@ export const {
 
 const framework = 'ember';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 export { forceReRender };

app/html/src/client/index.ts

@@ -7,7 +7,6 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/html/src/client/preview/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
-import { ClientStoryApi } from '@storybook/addons';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
 import render from './render';
@@ -10,12 +10,11 @@ const framework = 'html';
 
 interface ClientApi extends ClientStoryApi<StoryFnHtmlReturnType> {
   setAddon(addon: any): void;
-  configure(loaders: () => void, module: NodeModule): void;
+  configure(loader: Loadable, module: NodeModule, framework: string): void;
   getStorybook(): IStorybookSection[];
   clearDecorators(): void;
   forceReRender(): void;
   raw: () => any; // todo add type
-  load: (req: any, m: NodeModule, framework: string) => void;
 }
 
 const api = start(render);
@@ -26,12 +25,11 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   });
 };
 
-export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
+export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
 export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
 export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
 export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
-export const configure: ClientApi['configure'] = api.configApi.configure;
 export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
 export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
 export const raw: ClientApi['raw'] = api.clientApi.raw;

app/marko/src/client/index.js

@@ -7,7 +7,6 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/marko/src/client/preview/index.js

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
 
 export const {
   setAddon,
@@ -16,7 +16,6 @@ export const {
 
 const framework = 'marko';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 export { forceReRender };

app/mithril/src/client/index.js

@@ -7,7 +7,6 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/mithril/src/client/preview/index.js

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
 
 export const {
   setAddon,
@@ -16,7 +16,6 @@ export const {
 
 const framework = 'mithril';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 export { forceReRender };

app/polymer/src/client/index.js

@@ -7,7 +7,6 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/polymer/src/client/preview/index.js

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
 
 export const {
   setAddon,
@@ -16,7 +16,6 @@ export const {
 
 const framework = 'polymer';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 export { forceReRender };

app/preact/src/client/index.js

@@ -7,5 +7,4 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';

app/preact/src/client/preview/index.js

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
 
 export const {
   setAddon,
@@ -16,7 +16,6 @@ export const {
 
 const framework = 'preact';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 export { forceReRender };

app/rax/src/client/index.js

@@ -7,5 +7,4 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';

app/rax/src/client/preview/index.js

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
 
 export const {
   setAddon,
@@ -16,7 +16,6 @@ export const {
 
 const framework = 'rax';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 export { forceReRender };

app/react/src/client/index.ts

@@ -7,7 +7,6 @@ export {
   getStorybook,
   raw,
   forceReRender,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/react/src/client/preview/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-destructuring */
 import { start } from '@storybook/core/client';
-import { ClientStoryApi } from '@storybook/addons';
+import { ClientStoryApi, Loadable } from '@storybook/addons';
 
 import './globals';
 import render from './render';
@@ -10,12 +10,11 @@ const framework = 'react';
 
 interface ClientApi extends ClientStoryApi<StoryFnReactReturnType> {
   setAddon(addon: any): void;
-  configure(loaders: () => void, module: NodeModule): void;
+  configure(loader: Loadable, module: NodeModule, framework: string): void;
   getStorybook(): IStorybookSection[];
   clearDecorators(): void;
   forceReRender(): void;
   raw: () => any; // todo add type
-  load: (...args: any[]) => void;
 }
 
 const api = start(render);
@@ -26,12 +25,11 @@ export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   });
 };
 
-export const load: ClientApi['load'] = (...args) => api.load(...args, framework);
+export const configure: ClientApi['configure'] = (...args) => api.configure(...args, framework);
 export const addDecorator: ClientApi['addDecorator'] = api.clientApi.addDecorator;
 export const addParameters: ClientApi['addParameters'] = api.clientApi.addParameters;
 export const clearDecorators: ClientApi['clearDecorators'] = api.clientApi.clearDecorators;
 export const setAddon: ClientApi['setAddon'] = api.clientApi.setAddon;
-export const configure: ClientApi['configure'] = api.configApi.configure;
 export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
 export const getStorybook: ClientApi['getStorybook'] = api.clientApi.getStorybook;
 export const raw: ClientApi['raw'] = api.clientApi.raw;

app/riot/src/client/index.js

@@ -12,7 +12,6 @@ export {
   compileNow,
   asCompiledCode,
   raw,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/riot/src/client/preview/index.js

@@ -5,7 +5,7 @@ import riot, { tag2, mount as vendorMount } from 'riot';
 import render from './render';
 import { compileNow as unboundCompileNow, asCompiledCode } from './compileStageFunctions';
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
 
 export const {
   setAddon,
@@ -18,9 +18,8 @@ export const {
 
 const framework = 'riot';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 const mount = vendorMount.bind(riot, '#root');
 const compileNow = unboundCompileNow.bind(null, tag2);
 export { forceReRender, render, tag2 as tag, mount, compileNow, asCompiledCode };

app/svelte/src/client/index.js

@@ -7,7 +7,6 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/svelte/src/client/preview/index.js

@@ -3,7 +3,7 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
+const { configure: coreConfigure, clientApi, forceReRender } = start(render);
 
 export const {
   setAddon,
@@ -16,7 +16,6 @@ export const {
 
 const framework = 'svelte';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 export { forceReRender };

app/vue/src/client/index.js

@@ -7,7 +7,6 @@ export {
   getStorybook,
   forceReRender,
   raw,
-  load,
 } from './preview';
 
 if (module && module.hot && module.hot.decline) {

app/vue/src/client/preview/index.js

@@ -75,7 +75,9 @@ function decorateStory(getStory, decorators) {
   );
 }
 
-const { load: coreLoad, clientApi, configApi, forceReRender } = start(render, { decorateStory });
+const { configure: coreConfigure, clientApi, forceReRender } = start(render, {
+  decorateStory,
+});
 
 export const {
   setAddon,
@@ -88,7 +90,6 @@ export const {
 
 const framework = 'vue';
 export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
-export const load = (...args) => coreLoad(...args, framework);
+export const configure = (...args) => coreConfigure(...args, framework);
 
-export const { configure } = configApi;
 export { forceReRender };

docs/src/pages/basics/writing-stories/index.md

@@ -98,12 +98,12 @@ Stories are loaded in the `.storybook/config.js` file.
 The most convenient way to load stories is by filename. For example, if you stories files are located in the `src/components` directory, you can use the following snippet:
 
 ```js
-import { load } from '@storybook/react';
+import { configure } from '@storybook/react';
 
-load(require.context('../src/components', true, /\.stories\.js$/), module);
+configure(require.context('../src/components', true, /\.stories\.js$/), module);
 ```
 
-The `load` function accepts:
+The `configure` function accepts:
 
 - A single `require.context` "`req`"
 - An array of `req`s to load from multiple locations
@@ -112,9 +112,9 @@ The `load` function accepts:
 If you want to load from multiple locations, you could use an array:
 
 ```js
-import { load } from '@storybook/react';
+import { configure } from '@storybook/react';
 
-load([
+configure([
   require.context('../src/components', true, /\.stories\.js$/)
   require.context('../lib', true, /\.stories\.js$/)
 ], module);
@@ -123,7 +123,7 @@ load([
 Or if you want to do some custom loading logic, you can use a loader function. Just remember to return an array of module exports if you want to use the module story format:
 
 ```js
-import { load } from '@storybook/react';
+import { configure } from '@storybook/react';
 
 const loaderFn = () => {
   const allExports = [require('./welcome.stories.js')];
@@ -132,12 +132,14 @@ const loaderFn = () => {
   return allExports;
 };
 
-load(loaderFn, module);
+configure(loaderFn, module);
 ```
 
 Storybook uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#require-context) to load modules dynamically. Take a look at the relevant Webpack [docs](https://webpack.js.org/guides/dependency-management/#require-context) to learn more about how to use `require.context`.
 
-The `load` function is available since Storybook 5.2 and is the recommended way to load stories. It replaces the [configure function](../../formats/storiesof-api/#legacy-loading), which is still in use in most Storybook examples, and is the only way to currently load stories in React Native.
+If you are using the `storiesOf` API directly, or are using `@storybook/react-native` where CSF is unavailable, you should use a loader function with no return value.
+
+Furthermore, the **React Native** packager resolves all imports at build-time, so it's not possible to load modules dynamically. There is a third party loader [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically generate the import statements for all stories.
 
 ## Decorators
 

docs/src/pages/formats/storiesof-api/index.md

@@ -75,49 +75,6 @@ storiesOf('Button', module).add(
 );
 ```
 
-## Legacy loading
-
-With the Component Story Format (CSF), we introduced a `load` API. To load the all `.stories.js` files, including `storiesOf` files, simply run the following in your Storybook config file:
-
-```js
-import { load } from '@storybook/react';
-
-load(require.context('../src/components', true, /\.stories\.js$/), module);
-```
-
-The `load` API can also take an array of `require.context` `req`s, or a loader function. For more information see ["Loading stories"](../../basics/writing-stories/#loading-stories)
-
-Prior to 5.2, we used an API called `configure` instead:
-
-```js
-import { configure } from '@storybook/react';
-
-const req = require.context('../src/components', true, /\.stories\.js$/);
-
-function loadStories() {
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
-```
-
-This example uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#require-context) to load modules dynamically. Take a look at the relevant Webpack [docs](https://webpack.js.org/guides/dependency-management/#require-context) to learn more about how to use `require.context`.
-
-Additionally, because `storiesOf` is simply an API, you can require individual files inside the configuration function, which allows you to precisely control which files are loaded and the specific load order.
-
-```js
-import { load } from '@storybook/react';
-
-function loadStories() {
-  require('../stories/Foo.stories.js');
-  require('../stories/Bar.stories.js');
-}
-
-load(loadStories, module);
-```
-
-The **React Native** packager resolves all imports at build-time, so it's not possible to load modules dynamically. There is a third party loader [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically generate the import statements for all stories.
-
 ## Component Story Format migration
 
 To make it easier to adopt the new [Component Story Format (CSF)](../component-story-format/), we've created an automatic migration tool to transform `storiesOf` API to Module format.

examples/angular-cli/.storybook/config.ts

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/angular';
+import { configure, addParameters, addDecorator } from '@storybook/angular';
 import { withA11y } from '@storybook/addon-a11y';
 import { DocsPage } from '@storybook/addon-docs/blocks';
 import addCssWarning from '../src/cssWarning';
@@ -16,4 +16,4 @@ addParameters({
   docs: DocsPage,
 });
 
-load(require.context('../src/stories', true, /\.stories\.(ts|mdx)$/), module);
+configure(require.context('../src/stories', true, /\.stories\.(ts|mdx)$/), module);

examples/cra-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/react';
+import { configure, addParameters, addDecorator } from '@storybook/react';
 import { create } from '@storybook/theming';
 import { withA11y } from '@storybook/addon-a11y';
 import { DocsPage } from '@storybook/addon-docs/blocks';
@@ -24,4 +24,4 @@ addParameters({
   docs: DocsPage,
 });
 
-load(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module);
+configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module);

examples/cra-react15/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters } from '@storybook/react';
+import { configure, addParameters } from '@storybook/react';
 import { create } from '@storybook/theming/create';
 
 addParameters({
@@ -17,4 +17,4 @@ const loadFn = () => {
   return req.keys().map(fname => req(fname));
 };
 
-load(loadFn, module);
+configure(loadFn, module);

examples/ember-cli/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/ember';
+import { configure, addParameters, addDecorator } from '@storybook/ember';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -9,4 +9,4 @@ addParameters({
   },
 });
 
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

examples/html-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/html';
+import { configure, addParameters, addDecorator } from '@storybook/html';
 import { withA11y } from '@storybook/addon-a11y';
 import { DocsPage } from '@storybook/addon-docs/blocks';
 
@@ -21,4 +21,4 @@ addParameters({
   docs: DocsPage,
 });
 
-load(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);
+configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);

examples/marko-cli/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/marko';
+import { configure, addParameters, addDecorator } from '@storybook/marko';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,4 +8,4 @@ addParameters({
   },
 });
 
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

examples/mithril-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/mithril';
+import { configure, addParameters, addDecorator } from '@storybook/mithril';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,4 +8,4 @@ addParameters({
   },
 });
 
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

examples/official-storybook/config.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { load, addDecorator, addParameters } from '@storybook/react';
+import { configure, addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
 import { DocsPage } from '@storybook/addon-docs/blocks';
 
@@ -60,7 +60,7 @@ addParameters({
   docs: DocsPage,
 });
 
-load(
+configure(
   [
     require.context('../../lib/ui/src', true, /\.stories\.(js|tsx?|mdx)$/),
     require.context('../../lib/components/src', true, /\.stories\.(js|tsx?|mdx)$/),

examples/polymer-cli/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/polymer';
+import { configure, addParameters, addDecorator } from '@storybook/polymer';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,4 +8,4 @@ addParameters({
   },
 });
 
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

examples/preact-kitchen-sink/.storybook/config.js

@@ -1,5 +1,5 @@
 /** @jsx h */
-import { load, addParameters, addDecorator } from '@storybook/preact';
+import { configure, addParameters, addDecorator } from '@storybook/preact';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -10,4 +10,4 @@ addParameters({
   },
 });
 
-load(require.context('../src', true, /\.stories\.js$/), module);
+configure(require.context('../src', true, /\.stories\.js$/), module);

examples/rax-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters } from '@storybook/rax';
+import { configure, addParameters } from '@storybook/rax';
 
 addParameters({
   options: {
@@ -15,4 +15,4 @@ addParameters({
   },
 });
 
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

examples/riot-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/riot';
+import { configure, addParameters, addDecorator } from '@storybook/riot';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,4 +8,4 @@ addParameters({
   },
 });
 
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

examples/svelte-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/svelte';
+import { configure, addParameters, addDecorator } from '@storybook/svelte';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,4 +8,4 @@ addParameters({
   },
 });
 
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

examples/vue-kitchen-sink/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters, addDecorator } from '@storybook/vue';
+import { configure, addParameters, addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { withA11y } from '@storybook/addon-a11y';
@@ -20,4 +20,4 @@ addParameters({
   docs: DocsPage,
 });
 
-load(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module);
+configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module);

lib/addons/src/types.ts

@@ -93,3 +93,7 @@ export interface ClientStoryApi<TApi> {
   addDecorator(decorator: DecoratorFunction): StoryApi<TApi>;
   addParameters(parameter: Parameters): StoryApi<TApi>;
 }
+
+type LoadFn = () => any;
+type RequireContext = any; // FIXME
+export type Loadable = RequireContext | [RequireContext] | LoadFn;

lib/cli/generators/ANGULAR/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/angular';
+import { configure } from '@storybook/angular';
 
 // automatically import all files ending in *.stories.ts
-load(require.context('../src/stories', true, /\.stories\.ts$/), module);
+configure(require.context('../src/stories', true, /\.stories\.ts$/), module);

lib/cli/generators/EMBER/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/ember';
+import { configure } from '@storybook/ember';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/HTML/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/html';
+import { configure } from '@storybook/html';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/MARKO/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/marko';
+import { configure } from '@storybook/marko';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/METEOR/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/react';
+import { configure } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/MITHRIL/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/mithril';
+import { configure } from '@storybook/mithril';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/POLYMER/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/polymer';
+import { configure } from '@storybook/polymer';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

lib/cli/generators/PREACT/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/preact';
+import { configure } from '@storybook/preact';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/RAX/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load, addParameters } from '@storybook/rax';
+import { configure, addParameters } from '@storybook/rax';
 
 addParameters({
   options: {
@@ -16,4 +16,4 @@ addParameters({
 });
 
 // automatically import all story js files that end with *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/REACT/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/react';
+import { configure } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/REACT_SCRIPTS/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/react';
+import { configure } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

lib/cli/generators/RIOT/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/riot';
+import { configure } from '@storybook/riot';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/SFC_VUE/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/vue';
+import { configure } from '@storybook/vue';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
+configure(require.context('../src/stories', true, /\.stories\.js$/), module);

lib/cli/generators/SVELTE/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/svelte';
+import { configure } from '@storybook/svelte';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/VUE/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/vue';
+import { configure } from '@storybook/vue';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/cli/generators/WEBPACK_REACT/template/.storybook/config.js

@@ -1,4 +1,4 @@
-import { load } from '@storybook/react';
+import { configure } from '@storybook/react';
 
 // automatically import all files ending in *.stories.js
-load(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.js$/), module);

lib/client-api/src/types.ts

@@ -58,6 +58,7 @@ export interface LegacyData {
 export interface ClientApiAddon<TApi = unknown> extends Addon {
   apply: (a: StoryApi<TApi>, b: any[]) => any;
 }
+
 export interface ClientApiAddons<TApi> {
   [key: string]: ClientApiAddon<TApi>;
 }

lib/core/src/client/preview/start.js

@@ -316,9 +316,8 @@ export default function start(render, { decorateStory } = {}) {
       reqs = [loadable];
     }
 
-    let currentExports;
+    let currentExports = new Set();
     if (reqs) {
-      currentExports = new Set();
       reqs.forEach(req => {
         req.keys().forEach(filename => {
           const fileExports = req(filename);
@@ -326,7 +325,16 @@ export default function start(render, { decorateStory } = {}) {
         });
       });
     } else {
-      currentExports = new Set(loadable());
+      const exported = loadable();
+      if (Array.isArray(exported) && !exported.find(obj => !obj.default)) {
+        currentExports = new Set(exported);
+      } else if (exported) {
+        logger.warn(
+          `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
+            exported
+          )}`
+        );
+      }
     }
 
     const removed = [...previousExports].filter(exp => !currentExports.has(exp));
@@ -398,7 +406,7 @@ export default function start(render, { decorateStory } = {}) {
    * @param {*} m - ES module object for hot-module-reloading (HMR)
    * @param {*} framework - name of framework in use, e.g. "react"
    */
-  const load = (loadable, m, framework) => {
+  const configure = (loadable, m, framework) => {
     if (m && m.hot && m.hot.dispose) {
       ({ previousExports = new Set() } = m.hot.data || {});
 
@@ -415,5 +423,5 @@ export default function start(render, { decorateStory } = {}) {
     configApi.configure(loadStories(loadable, framework), m);
   };
 
-  return { load, context, clientApi, configApi, forceReRender };
+  return { configure, context, clientApi, configApi, forceReRender };
 }