'),
- }}
- />
- ))
- .add('accepts story parameters', () =>
{text('Rendered string', '
Hello
')}, {
- knobs: { escapeHTML: false },
- });
-
-storiesOf('Addons|Knobs.withKnobs using options', module)
- .addDecorator(
- withKnobs({
- escapeHTML: false,
- })
- )
- .add('accepts options', () =>
{text('Rendered string', '
Hello
')});
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index 178497d939c1..60c57fc71cea 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -3,10 +3,6 @@ import React from 'react';
import BaseButton from '../components/BaseButton';
import markdownNotes from './notes/notes.md';
-const baseStory = () => (
-
-);
-
const markdownString = `
# Documentation
@@ -75,52 +71,57 @@ export default {
title: 'Addons|Notes',
};
-export const addonNotes = baseStory;
+export const addonNotes = () => (
+
+);
addonNotes.story = {
name: 'addon notes',
-
parameters: {
notes:
'This is the notes for a button. This is helpful for adding details about a story in a separate panel.',
},
};
-export const addonNotesRenderingImportedMarkdown = baseStory;
+export const addonNotesRenderingImportedMarkdown = () => (
+
+);
addonNotesRenderingImportedMarkdown.story = {
name: 'addon notes rendering imported markdown',
-
parameters: {
notes: { markdown: markdownNotes },
},
};
-export const addonNotesRenderingInlineGithubFlavoredMarkdown = baseStory;
+export const addonNotesRenderingInlineGithubFlavoredMarkdown = () => (
+
+);
addonNotesRenderingInlineGithubFlavoredMarkdown.story = {
name: 'addon notes rendering inline, github-flavored markdown',
-
parameters: {
notes: { markdown: markdownString },
},
};
-export const withAMarkdownTable = baseStory;
+export const withAMarkdownTable = () => (
+
+);
withAMarkdownTable.story = {
name: 'with a markdown table',
-
parameters: {
notes: { markdown: markdownTable },
},
};
-export const withAMarkdownGiphy = baseStory;
+export const withAMarkdownGiphy = () => (
+
+);
withAMarkdownGiphy.story = {
name: 'with a markdown giphy',
-
parameters: {
notes: { markdown: giphyMarkdown },
},
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
index 9fbd5064f928..fd61b0f97bc4 100644
--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -20,5 +20,4 @@ addParameters({
docs: DocsPage,
});
-load(require.context('../src/stories', true, /\.stories\.js$/), module);
-load(require.context('../src/stories', true, /\.stories\.mdx$/), module);
+load(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module);
diff --git a/lib/client-api/src/story_store.ts b/lib/client-api/src/story_store.ts
index 3292de148772..f70c1e972056 100644
--- a/lib/client-api/src/story_store.ts
+++ b/lib/client-api/src/story_store.ts
@@ -334,6 +334,7 @@ export default class StoryStore extends EventEmitter {
}
return acc;
}, {});
+ this.pushToManager();
}
}
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 39044742faee..e49d770f7585 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -304,11 +304,40 @@ export default function start(render, { decorateStory } = {}) {
window.__STORYBOOK_ADDONS_CHANNEL__ = channel; // may not be defined
}
- let previousExports = {};
- const loadStories = (req, framework) => () => {
- req.keys().forEach(filename => {
- const fileExports = req(filename);
+ let previousExports = new Set();
+ const loadStories = (loadable, framework) => () => {
+ let reqs = null;
+ if (Array.isArray(loadable)) {
+ reqs = loadable;
+ } else if (loadable.keys) {
+ reqs = [loadable];
+ }
+
+ let currentExports;
+ if (reqs) {
+ currentExports = new Set();
+ reqs.forEach(req => {
+ req.keys().forEach(filename => {
+ const fileExports = req(filename);
+ currentExports.add(fileExports);
+ });
+ });
+ } else {
+ currentExports = new Set(loadable());
+ }
+
+ const removed = [...previousExports].filter(exp => !currentExports.has(exp));
+ removed.forEach(exp => {
+ if (exp.default) {
+ storyStore.removeStoryKind(exp.default.title);
+ }
+ });
+ if (removed.length > 1) {
+ storyStore.incrementRevision();
+ }
+ const added = [...currentExports].filter(exp => !previousExports.has(exp));
+ added.forEach(fileExports => {
// An old-style story file
if (!fileExports.default) {
return;
@@ -316,25 +345,13 @@ export default function start(render, { decorateStory } = {}) {
if (!fileExports.default.title) {
throw new Error(
- `Unexpected default export without title in '${filename}': ${JSON.stringify(
- fileExports.default
- )}`
+ `Unexpected default export without title: ${JSON.stringify(fileExports.default)}`
);
}
const { default: meta, ...exports } = fileExports;
const kindName = meta.title;
- 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 });
@@ -358,21 +375,35 @@ export default function start(render, { decorateStory } = {}) {
kind.add(name || key, storyFn, { ...parameters, ...decoratorParams });
}
});
-
- previousExports[filename] = fileExports;
});
+ previousExports = currentExports;
};
- const load = (req, m, framework) => {
+ let loaded = false;
+ /**
+ * Load a collection of stories. If it has a default export, assume that it is a module-style
+ * file and process its named exports as stories. If not, assume it's an old-style
+ * storiesof file and simply require it.
+ *
+ * @param {*} loadable a require.context `req`, an array of `req`s, or a loader function that returns void or an array of exports
+ * @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) => {
if (m && m.hot && m.hot.dispose) {
- ({ previousExports = {} } = m.hot.data || {});
+ ({ previousExports = new Set() } = m.hot.data || {});
m.hot.dispose(data => {
+ loaded = false;
// eslint-disable-next-line no-param-reassign
data.previousExports = previousExports;
});
}
- configApi.configure(loadStories(req, framework), m);
+ if (loaded) {
+ logger.warn('Unexpected loaded state. Did you call `load` twice?');
+ }
+ loaded = true;
+ configApi.configure(loadStories(loadable, framework), m);
};
return { load, context, clientApi, configApi, forceReRender };