Module story format & framework param

app/angular/src/client/index.js

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

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

@@ -6,14 +6,18 @@ import render from './render';
 const { clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
   clearDecorators,
   getStorybook,
   raw,
+  load: coreLoad,
 } = clientApi;
 
+const framework = 'angular';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/ember/src/client/index.js

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

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

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'ember';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/html/src/client/index.js

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

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

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'html';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/marko/src/client/index.js

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

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

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'marko';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/mithril/src/client/index.js

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

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

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'mithril';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/polymer/src/client/index.js

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

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

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'polymer';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/preact/src/client/index.js

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

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

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'preact';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/react-native/src/index.ts

@@ -2,7 +2,7 @@ import Preview from './preview';
 
 const preview = new Preview();
 
-export const storiesOf = preview.api().storiesOf.bind(preview);
+const rawStoriesOf = preview.api().storiesOf.bind(preview);
 export const setAddon = preview.api().setAddon.bind(preview);
 export const addDecorator = preview.api().addDecorator.bind(preview);
 export const addParameters = preview.api().addParameters.bind(preview);
@@ -11,3 +11,6 @@ export const configure = preview.configure;
 export const getStorybook = preview.api().getStorybook.bind(preview);
 export const getStorybookUI = preview.getStorybookUI;
 export const raw = preview.api().raw.bind(preview);
+
+export const storiesOf = (...args: any[]) =>
+  rawStoriesOf(...args).addParameters({ framework: 'react-native' });

app/react/src/client/index.js

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

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

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'react';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/riot/src/client/index.js

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

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

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

app/svelte/src/client/index.js

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

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

@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'svelte';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

app/vue/src/client/index.js

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

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

@@ -70,10 +70,9 @@ function decorateStory(getStory, decorators) {
   );
 }
 
-const { clientApi, configApi, forceReRender } = start(render, { decorateStory });
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render, { decorateStory });
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -82,5 +81,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'vue';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };

examples/official-storybook/config.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, configure, addDecorator, addParameters } from '@storybook/react';
+import { load, addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
 
 import { withCssResources } from '@storybook/addon-cssresources';
@@ -58,75 +58,6 @@ addParameters({
   ],
 });
 
-let previousExports = {};
+load(require.context('../../lib/ui/src', true, /\.stories\.js$/), module);
-if (module && module.hot && module.hot.dispose) {
+load(require.context('../../lib/components/src', true, /\.stories\.tsx?$/), module);
-  ({ previousExports = {} } = module.hot.data || {});
+load(require.context('./stories', true, /\.stories\.js$/), module);
-
-  module.hot.dispose(data => {
-    // eslint-disable-next-line no-param-reassign
-    data.previousExports = previousExports;
-  });
-}
-
-// The simplest version of examples would just export this function for users to use
-function importAll(context) {
-  const storyStore = window.__STORYBOOK_CLIENT_API__._storyStore; // eslint-disable-line no-undef, no-underscore-dangle
-
-  context.keys().forEach(filename => {
-    const fileExports = context(filename);
-
-    // A old-style story file
-    if (!fileExports.default) {
-      return;
-    }
-
-    const { default: component, ...examples } = fileExports;
-    let componentOptions = component;
-    if (component.prototype && component.prototype.isReactComponent) {
-      componentOptions = { component };
-    }
-    const kindName = componentOptions.title || componentOptions.component.displayName;
-
-    if (previousExports[filename]) {
-      if (previousExports[filename] === fileExports) {
-        return;
-      }
-
-      // Otherwise clear this kind
-      storyStore.removeStoryKind(kindName);
-      storyStore.incrementRevision();
-    }
-
-    // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
-    const kind = storiesOf(kindName, true);
-
-    (componentOptions.decorators || []).forEach(decorator => {
-      kind.addDecorator(decorator);
-    });
-    if (componentOptions.parameters) {
-      kind.addParameters(componentOptions.parameters);
-    }
-
-    Object.keys(examples).forEach(key => {
-      const example = examples[key];
-      const { title = key, parameters } = example;
-      kind.add(title, example, parameters);
-    });
-
-    previousExports[filename] = fileExports;
-  });
-}
-
-function loadStories() {
-  let req;
-  req = require.context('../../lib/ui/src', true, /\.stories\.js$/);
-  importAll(req);
-
-  req = require.context('../../lib/components/src', true, /\.stories\.tsx?$/);
-  importAll(req);
-
-  req = require.context('./stories', true, /\.stories\.js$/);
-  importAll(req);
-}
-
-configure(loadStories, module);

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

@@ -219,5 +219,62 @@ export default function start(render, { decorateStory } = {}) {
     window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
   }
 
-  return { context, clientApi, configApi, forceReRender };
+  let previousExports = {};
+  const loadStories = (req, framework) => () => {
+    req.keys().forEach(filename => {
+      const fileExports = req(filename);
+
+      // An old-style story file
+      if (!(fileExports.default && fileExports.default.title)) {
+        return;
+      }
+
+      const { default: meta, ...examples } = fileExports;
+
+      const kindName = meta.title || meta.displayName;
+
+      if (previousExports[filename]) {
+        if (previousExports[filename] === fileExports) {
+          return;
+        }
+
+        // Otherwise clear this kind
+        storyStore.removeStoryKind(kindName);
+        storyStore.incrementRevision();
+      }
+
+      // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
+      const kind = clientApi.storiesOf(kindName, true);
+      kind.addParameters({ framework });
+
+      (meta.decorators || []).forEach(decorator => {
+        kind.addDecorator(decorator);
+      });
+      if (meta.parameters) {
+        kind.addParameters(meta.parameters);
+      }
+
+      Object.keys(examples).forEach(key => {
+        const example = examples[key];
+        const { title = example.title || key, parameters } = example;
+        kind.add(title, example, parameters);
+      });
+
+      previousExports[filename] = fileExports;
+    });
+  };
+
+  const load = (req, m, framework) => {
+    if (m && m.hot && m.hot.dispose) {
+      ({ previousExports = {} } = m.hot.data || {});
+
+      m.hot.dispose(data => {
+        // eslint-disable-next-line no-param-reassign
+        data.previousExports = previousExports;
+      });
+    }
+    configApi.configure(loadStories(req, framework), m);
+  };
+
+  return { load, context, clientApi, configApi, forceReRender };
 }