@storybook/addon-docs 7.0.0-alpha.5 → 7.0.0-alpha.6

package/dist/cjs/blocks/Canvas.js

@@ -71,8 +71,18 @@ const getPreviewProps = (_ref, docsContext, sourceContext) => {
   }
 
   const childArray = Array.isArray(children) ? children : [children];
-  const storyChildren = childArray.filter(c => c.props && (c.props.id || c.props.name));
-  const targetIds = storyChildren.map(s => s.props.id || (0, _csf.toId)(mdxComponentAnnotations.id || mdxComponentAnnotations.title, (0, _csf.storyNameFromExport)(mdxStoryNameToKey[s.props.name])));
+  const storyChildren = childArray.filter(c => c.props && (c.props.id || c.props.name || c.props.of));
+  const targetIds = storyChildren.map(({
+    props: {
+      id,
+      of,
+      name
+    }
+  }) => {
+    if (id) return id;
+    if (of) return docsContext.storyIdByModuleExport(of);
+    return (0, _csf.toId)(mdxComponentAnnotations.id || mdxComponentAnnotations.title, (0, _csf.storyNameFromExport)(mdxStoryNameToKey[name]));
+  });
   const sourceProps = (0, _Source.getSourceProps)({
     ids: targetIds
   }, docsContext, sourceContext);

package/dist/cjs/blocks/DocsContainer.js

@@ -57,23 +57,30 @@ const DocsContainer = ({
 }) => {
   const {
     id: storyId,
+    type,
     storyById
   } = context;
-  const {
-    parameters: {
-      options = {},
-      docs = {}
+  const allComponents = Object.assign({}, defaultComponents);
+  let theme = (0, _theming.ensure)(null);
+
+  if (type === 'legacy') {
+    const {
+      parameters: {
+        options = {},
+        docs = {}
+      }
+    } = storyById(storyId);
+    let themeVars = docs.theme;
+
+    if (!themeVars && options.theme) {
+      warnOptionsTheme();
+      themeVars = options.theme;
     }
-  } = storyById(storyId);
-  let themeVars = docs.theme;
 
-  if (!themeVars && options.theme) {
-    warnOptionsTheme();
-    themeVars = options.theme;
+    theme = (0, _theming.ensure)(themeVars);
+    Object.assign(allComponents, docs.components);
   }
 
-  const theme = (0, _theming.ensure)(themeVars);
-  const allComponents = Object.assign({}, defaultComponents, docs.components);
   (0, _react.useEffect)(() => {
     let url;
 

package/dist/cjs/blocks/DocsContext.js

@@ -17,9 +17,9 @@ var _global = require("global");
 
 /* eslint-disable no-underscore-dangle */
 if (_global.window && _global.window.__DOCS_CONTEXT__ === undefined) {
-  _global.window.__DOCS_CONTEXT__ = /*#__PURE__*/(0, _react.createContext)({});
+  _global.window.__DOCS_CONTEXT__ = /*#__PURE__*/(0, _react.createContext)(null);
   _global.window.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }
 
-const DocsContext = _global.window ? _global.window.__DOCS_CONTEXT__ : /*#__PURE__*/(0, _react.createContext)({});
+const DocsContext = _global.window ? _global.window.__DOCS_CONTEXT__ : /*#__PURE__*/(0, _react.createContext)(null);
 exports.DocsContext = DocsContext;

package/dist/cjs/blocks/DocsRenderer.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DocsRenderer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _DocsContainer = require("./DocsContainer");
+
+var _DocsPage = require("./DocsPage");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class DocsRenderer {
+  constructor() {
+    this.render = void 0;
+    this.unmount = void 0;
+
+    this.render = (docsContext, docsParameters, element, callback) => {
+      renderDocsAsync(docsContext, docsParameters, element).then(callback);
+    };
+
+    this.unmount = element => {
+      _reactDom.default.unmountComponentAtNode(element);
+    };
+  }
+
+}
+
+exports.DocsRenderer = DocsRenderer;
+
+async function renderDocsAsync(docsContext, docsParameters, element) {
+  var _docsParameters$getCo, _docsParameters$getPa;
+
+  const Container = docsParameters.container || (await ((_docsParameters$getCo = docsParameters.getContainer) === null || _docsParameters$getCo === void 0 ? void 0 : _docsParameters$getCo.call(docsParameters))) || _DocsContainer.DocsContainer;
+  const Page = docsParameters.page || (await ((_docsParameters$getPa = docsParameters.getPage) === null || _docsParameters$getPa === void 0 ? void 0 : _docsParameters$getPa.call(docsParameters))) || _DocsPage.DocsPage; // Use `title` as a key so that we force a re-render every time we switch components
+
+  const docsElement = /*#__PURE__*/_react.default.createElement(Container, {
+    key: docsContext.title,
+    context: docsContext
+  }, /*#__PURE__*/_react.default.createElement(Page, null));
+
+  await new Promise(resolve => {
+    _reactDom.default.render(docsElement, element, resolve);
+  });
+}

package/dist/cjs/blocks/ExternalDocsContainer.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalDocsContainer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+var _DocsContext = require("./DocsContext");
+
+var _ExternalPreview = require("./ExternalPreview");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let preview;
+
+const ExternalDocsContainer = ({
+  projectAnnotations,
+  children
+}) => {
+  if (!preview) preview = new _ExternalPreview.ExternalPreview(projectAnnotations);
+  let pageMeta;
+
+  const setMeta = m => {
+    pageMeta = m;
+  };
+
+  const docsContext = {
+    type: 'external',
+    id: 'external-docs',
+    title: 'External',
+    name: 'Docs',
+    storyIdByModuleExport: (storyExport, metaExport) => {
+      return preview.storyIdByModuleExport(storyExport, metaExport || pageMeta);
+    },
+    storyById: id => {
+      return preview.storyById(id);
+    },
+    getStoryContext: () => {
+      throw new Error('not implemented');
+    },
+    componentStories: () => {
+      // TODO: could implement in a very similar way to in DocsRender. (TODO: How to share code?)
+      throw new Error('not implemented');
+    },
+    loadStory: async id => {
+      return preview.storyById(id);
+    },
+    renderStoryToElement: (story, element) => {
+      return preview.renderStoryToElement(story, element);
+    },
+    setMeta
+  };
+  return /*#__PURE__*/_react.default.createElement(_DocsContext.DocsContext.Provider, {
+    value: docsContext
+  }, /*#__PURE__*/_react.default.createElement(_theming.ThemeProvider, {
+    theme: (0, _theming.ensure)(_theming.themes.normal)
+  }, children));
+};
+
+exports.ExternalDocsContainer = ExternalDocsContainer;

package/dist/cjs/blocks/ExternalPreview.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalPreview = void 0;
+
+var _previewWeb = require("@storybook/preview-web");
+
+var _csf = require("@storybook/csf");
+
+class ConstantMap {
+  // eslint-disable-next-line no-useless-constructor
+  constructor(prefix) {
+    this.prefix = prefix;
+    this.entries = new Map();
+  }
+
+  get(key) {
+    if (!this.entries.has(key)) {
+      this.entries.set(key, `${this.prefix}${this.entries.size}`);
+    }
+
+    return this.entries.get(key);
+  }
+
+}
+
+class ExternalPreview extends _previewWeb.Preview {
+  constructor(projectAnnotations) {
+    super();
+    this.projectAnnotations = projectAnnotations;
+    this.initialized = false;
+    this.importPaths = new ConstantMap('./importPath/');
+    this.titles = new ConstantMap('title-');
+    this.storyIds = new Map();
+    this.storyIndex = {
+      v: 4,
+      entries: {}
+    };
+    this.moduleExportsByImportPath = {};
+  }
+
+  storyIdByModuleExport(storyExport, meta) {
+    if (!this.storyIds.has(storyExport)) this.addStoryFromExports(storyExport, meta);
+    return this.storyIds.get(storyExport);
+  }
+
+  addStoryFromExports(storyExport, meta) {
+    const importPath = this.importPaths.get(meta);
+    this.moduleExportsByImportPath[importPath] = meta;
+    const title = meta.default.title || this.titles.get(meta);
+    const exportEntry = Object.entries(meta).find(([_, moduleExport]) => moduleExport === storyExport);
+    if (!exportEntry) throw new Error(`Didn't find \`of\` used in Story block in the provided CSF exports`);
+    const storyId = (0, _csf.toId)(title, exportEntry[0]);
+    this.storyIds.set(storyExport, storyId);
+    this.storyIndex.entries[storyId] = {
+      id: storyId,
+      importPath,
+      title,
+      name: 'Name',
+      type: 'story'
+    };
+
+    if (!this.initialized) {
+      this.initialized = true;
+      return this.initialize({
+        getStoryIndex: () => this.storyIndex,
+        importFn: path => {
+          return Promise.resolve(this.moduleExportsByImportPath[path]);
+        },
+        getProjectAnnotations: () => this.projectAnnotations
+      });
+    } // else
+
+
+    return this.onStoriesChanged({
+      storyIndex: this.storyIndex
+    });
+  }
+
+  storyById(storyId) {
+    const entry = this.storyIndex.entries[storyId];
+    if (!entry) throw new Error(`Unknown storyId ${storyId}`);
+    const {
+      importPath,
+      title
+    } = entry;
+    const moduleExports = this.moduleExportsByImportPath[importPath];
+    const csfFile = this.storyStore.processCSFFileWithCache(moduleExports, importPath, title);
+    return this.storyStore.storyFromCSFFile({
+      storyId,
+      csfFile
+    });
+  }
+
+}
+
+exports.ExternalPreview = ExternalPreview;

package/dist/cjs/blocks/Meta.js

@@ -30,6 +30,11 @@ function getFirstStoryId(docsContext) {
 
 function renderAnchor() {
   const context = (0, _react.useContext)(_DocsContext.DocsContext);
+
+  if (context.type !== 'legacy') {
+    return null;
+  }
+
   const anchorId = getFirstStoryId(context) || context.id;
   return /*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
     storyId: anchorId
@@ -41,9 +46,18 @@ function renderAnchor() {
  */
 
 
-const Meta = () => {
-  const params = new URL(document.location).searchParams;
-  const isDocs = params.get('viewMode') === 'docs';
+const Meta = ({
+  of
+}) => {
+  let isDocs = true;
+
+  if (document) {
+    const params = new URL(document.location).searchParams;
+    isDocs = params.get('viewMode') === 'docs';
+  }
+
+  const context = (0, _react.useContext)(_DocsContext.DocsContext);
+  if (of) context.setMeta(of);
   return isDocs ? renderAnchor() : null;
 };
 

package/dist/cjs/blocks/Source.js

@@ -101,9 +101,15 @@ const getSourceProps = (props, docsContext, sourceContext) => {
     id: currentId,
     storyById
   } = docsContext;
-  const {
-    parameters
-  } = storyById(currentId);
+  let parameters = {};
+
+  try {
+    ({
+      parameters
+    } = storyById(currentId));
+  } catch (err) {// TODO: in external mode, there is no "current"
+  }
+
   const codeProps = props;
   const singleProps = props;
   const multiProps = props;

package/dist/cjs/blocks/Story.js

@@ -36,8 +36,15 @@ exports.lookupStoryId = lookupStoryId;
 
 const getStoryId = (props, context) => {
   const {
-    id
+    id,
+    of,
+    meta
   } = props;
+
+  if (of) {
+    return context.storyIdByModuleExport(of, meta);
+  }
+
   const {
     name
   } = props;
@@ -53,8 +60,8 @@ const getStoryProps = ({
 }, story) => {
   const {
     name: storyName,
-    parameters
-  } = story;
+    parameters = {}
+  } = story || {};
   const {
     docs = {}
   } = parameters;
@@ -71,7 +78,7 @@ const getStoryProps = ({
   const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
   return Object.assign({
     inline: storyIsInline,
-    id: story.id,
+    id: story === null || story === void 0 ? void 0 : story.id,
     height: height || (storyIsInline ? undefined : iframeHeight),
     title: storyName
   }, storyIsInline && {
@@ -109,7 +116,9 @@ const Story = props => {
     return null;
   }
 
-  if (storyProps.inline) {
+  const inline = context.type === 'external' || storyProps.inline;
+
+  if (inline) {
     // We do this so React doesn't complain when we replace the span in a secondary render
     const htmlContents = `<span></span>`; // FIXME: height/style/etc. lifted from PureStory
 
@@ -120,7 +129,7 @@ const Story = props => {
       id: storyBlockIdFromId(story.id)
     }, /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
       components: _components.resetComponents
-    }, height ? /*#__PURE__*/_react.default.createElement("style", null, `#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null), /*#__PURE__*/_react.default.createElement("div", {
+    }, height ? /*#__PURE__*/_react.default.createElement("style", null, `#story--${story.id} { min-height: ${height}px; transform: translateZ(0); overflow: auto }`) : null, showLoader && /*#__PURE__*/_react.default.createElement(_components.StorySkeleton, null), /*#__PURE__*/_react.default.createElement("div", {
       ref: storyRef,
       "data-name": story.name,
       dangerouslySetInnerHTML: {

package/dist/cjs/blocks/index.js

@@ -141,6 +141,34 @@ Object.keys(_DocsContainer).forEach(function (key) {
   });
 });
 
+var _DocsRenderer = require("./DocsRenderer");
+
+Object.keys(_DocsRenderer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _DocsRenderer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DocsRenderer[key];
+    }
+  });
+});
+
+var _ExternalDocsContainer = require("./ExternalDocsContainer");
+
+Object.keys(_ExternalDocsContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ExternalDocsContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ExternalDocsContainer[key];
+    }
+  });
+});
+
 var _DocsStory = require("./DocsStory");
 
 Object.keys(_DocsStory).forEach(function (key) {

package/dist/cjs/blocks/useStory.js

@@ -14,11 +14,9 @@ function useStory(storyId, context) {
 }
 
 function useStories(storyIds, context) {
-  const initialStoriesById = context.componentStories().reduce((acc, story) => {
-    acc[story.id] = story;
-    return acc;
-  }, {});
-  const [storiesById, setStories] = (0, _react.useState)(initialStoriesById);
+  // Legacy docs pages can reference any story by id. Those stories will need to be
+  // asyncronously loaded; we use the state for this
+  const [storiesById, setStories] = (0, _react.useState)({});
   (0, _react.useEffect)(() => {
     Promise.all(storyIds.map(async storyId => {
       // loadStory will be called every single time useStory is called
@@ -33,5 +31,14 @@ function useStories(storyIds, context) {
       }));
     }));
   });
-  return storyIds.map(storyId => storiesById[storyId]);
+  return storyIds.map(storyId => {
+    if (storiesById[storyId]) return storiesById[storyId];
+
+    try {
+      // If we are allowed to load this story id synchonously, this will work
+      return context.storyById(storyId);
+    } catch (err) {
+      return null;
+    }
+  });
 }

package/dist/cjs/preview.js

@@ -11,8 +11,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const parameters = {
   docs: {
-    getContainer: async () => (await Promise.resolve().then(() => _interopRequireWildcard(require('./blocks')))).DocsContainer,
-    getPage: async () => (await Promise.resolve().then(() => _interopRequireWildcard(require('./blocks')))).DocsPage
+    renderer: async () => {
+      const {
+        DocsRenderer
+      } = await Promise.resolve().then(() => _interopRequireWildcard(require('./blocks/DocsRenderer')));
+      return new DocsRenderer();
+    }
   }
 };
 exports.parameters = parameters;

package/dist/esm/blocks/Canvas.js

@@ -47,8 +47,18 @@ const getPreviewProps = (_ref, docsContext, sourceContext) => {
   }
 
   const childArray = Array.isArray(children) ? children : [children];
-  const storyChildren = childArray.filter(c => c.props && (c.props.id || c.props.name));
-  const targetIds = storyChildren.map(s => s.props.id || toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[s.props.name])));
+  const storyChildren = childArray.filter(c => c.props && (c.props.id || c.props.name || c.props.of));
+  const targetIds = storyChildren.map(({
+    props: {
+      id,
+      of,
+      name
+    }
+  }) => {
+    if (id) return id;
+    if (of) return docsContext.storyIdByModuleExport(of);
+    return toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[name]));
+  });
   const sourceProps = getSourceProps({
     ids: targetIds
   }, docsContext, sourceContext);

package/dist/esm/blocks/DocsContainer.js

@@ -30,23 +30,30 @@ export const DocsContainer = ({
 }) => {
   const {
     id: storyId,
+    type,
     storyById
   } = context;
-  const {
-    parameters: {
-      options = {},
-      docs = {}
+  const allComponents = Object.assign({}, defaultComponents);
+  let theme = ensureTheme(null);
+
+  if (type === 'legacy') {
+    const {
+      parameters: {
+        options = {},
+        docs = {}
+      }
+    } = storyById(storyId);
+    let themeVars = docs.theme;
+
+    if (!themeVars && options.theme) {
+      warnOptionsTheme();
+      themeVars = options.theme;
     }
-  } = storyById(storyId);
-  let themeVars = docs.theme;
 
-  if (!themeVars && options.theme) {
-    warnOptionsTheme();
-    themeVars = options.theme;
+    theme = ensureTheme(themeVars);
+    Object.assign(allComponents, docs.components);
   }
 
-  const theme = ensureTheme(themeVars);
-  const allComponents = Object.assign({}, defaultComponents, docs.components);
   useEffect(() => {
     let url;
 

package/dist/esm/blocks/DocsContext.js

@@ -9,8 +9,8 @@ import { window as globalWindow } from 'global';
 
 /* eslint-disable no-underscore-dangle */
 if (globalWindow && globalWindow.__DOCS_CONTEXT__ === undefined) {
-  globalWindow.__DOCS_CONTEXT__ = /*#__PURE__*/createContext({});
+  globalWindow.__DOCS_CONTEXT__ = /*#__PURE__*/createContext(null);
   globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }
 
-export const DocsContext = globalWindow ? globalWindow.__DOCS_CONTEXT__ : /*#__PURE__*/createContext({});
+export const DocsContext = globalWindow ? globalWindow.__DOCS_CONTEXT__ : /*#__PURE__*/createContext(null);

package/dist/esm/blocks/DocsRenderer.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { DocsContainer } from './DocsContainer';
+import { DocsPage } from './DocsPage';
+export class DocsRenderer {
+  constructor() {
+    this.render = void 0;
+    this.unmount = void 0;
+
+    this.render = (docsContext, docsParameters, element, callback) => {
+      renderDocsAsync(docsContext, docsParameters, element).then(callback);
+    };
+
+    this.unmount = element => {
+      ReactDOM.unmountComponentAtNode(element);
+    };
+  }
+
+}
+
+async function renderDocsAsync(docsContext, docsParameters, element) {
+  const Container = docsParameters.container || (await docsParameters.getContainer?.()) || DocsContainer;
+  const Page = docsParameters.page || (await docsParameters.getPage?.()) || DocsPage; // Use `title` as a key so that we force a re-render every time we switch components
+
+  const docsElement = /*#__PURE__*/React.createElement(Container, {
+    key: docsContext.title,
+    context: docsContext
+  }, /*#__PURE__*/React.createElement(Page, null));
+  await new Promise(resolve => {
+    ReactDOM.render(docsElement, element, resolve);
+  });
+}

package/dist/esm/blocks/ExternalDocsContainer.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ThemeProvider, themes, ensure } from '@storybook/theming';
+import { DocsContext } from './DocsContext';
+import { ExternalPreview } from './ExternalPreview';
+let preview;
+export const ExternalDocsContainer = ({
+  projectAnnotations,
+  children
+}) => {
+  if (!preview) preview = new ExternalPreview(projectAnnotations);
+  let pageMeta;
+
+  const setMeta = m => {
+    pageMeta = m;
+  };
+
+  const docsContext = {
+    type: 'external',
+    id: 'external-docs',
+    title: 'External',
+    name: 'Docs',
+    storyIdByModuleExport: (storyExport, metaExport) => {
+      return preview.storyIdByModuleExport(storyExport, metaExport || pageMeta);
+    },
+    storyById: id => {
+      return preview.storyById(id);
+    },
+    getStoryContext: () => {
+      throw new Error('not implemented');
+    },
+    componentStories: () => {
+      // TODO: could implement in a very similar way to in DocsRender. (TODO: How to share code?)
+      throw new Error('not implemented');
+    },
+    loadStory: async id => {
+      return preview.storyById(id);
+    },
+    renderStoryToElement: (story, element) => {
+      return preview.renderStoryToElement(story, element);
+    },
+    setMeta
+  };
+  return /*#__PURE__*/React.createElement(DocsContext.Provider, {
+    value: docsContext
+  }, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: ensure(themes.normal)
+  }, children));
+};

package/dist/esm/blocks/ExternalPreview.js

@@ -0,0 +1,89 @@
+import { Preview } from '@storybook/preview-web';
+import { toId } from '@storybook/csf';
+
+class ConstantMap {
+  // eslint-disable-next-line no-useless-constructor
+  constructor(prefix) {
+    this.prefix = prefix;
+    this.entries = new Map();
+  }
+
+  get(key) {
+    if (!this.entries.has(key)) {
+      this.entries.set(key, `${this.prefix}${this.entries.size}`);
+    }
+
+    return this.entries.get(key);
+  }
+
+}
+
+export class ExternalPreview extends Preview {
+  constructor(projectAnnotations) {
+    super();
+    this.projectAnnotations = projectAnnotations;
+    this.initialized = false;
+    this.importPaths = new ConstantMap('./importPath/');
+    this.titles = new ConstantMap('title-');
+    this.storyIds = new Map();
+    this.storyIndex = {
+      v: 4,
+      entries: {}
+    };
+    this.moduleExportsByImportPath = {};
+  }
+
+  storyIdByModuleExport(storyExport, meta) {
+    if (!this.storyIds.has(storyExport)) this.addStoryFromExports(storyExport, meta);
+    return this.storyIds.get(storyExport);
+  }
+
+  addStoryFromExports(storyExport, meta) {
+    const importPath = this.importPaths.get(meta);
+    this.moduleExportsByImportPath[importPath] = meta;
+    const title = meta.default.title || this.titles.get(meta);
+    const exportEntry = Object.entries(meta).find(([_, moduleExport]) => moduleExport === storyExport);
+    if (!exportEntry) throw new Error(`Didn't find \`of\` used in Story block in the provided CSF exports`);
+    const storyId = toId(title, exportEntry[0]);
+    this.storyIds.set(storyExport, storyId);
+    this.storyIndex.entries[storyId] = {
+      id: storyId,
+      importPath,
+      title,
+      name: 'Name',
+      type: 'story'
+    };
+
+    if (!this.initialized) {
+      this.initialized = true;
+      return this.initialize({
+        getStoryIndex: () => this.storyIndex,
+        importFn: path => {
+          return Promise.resolve(this.moduleExportsByImportPath[path]);
+        },
+        getProjectAnnotations: () => this.projectAnnotations
+      });
+    } // else
+
+
+    return this.onStoriesChanged({
+      storyIndex: this.storyIndex
+    });
+  }
+
+  storyById(storyId) {
+    const entry = this.storyIndex.entries[storyId];
+    if (!entry) throw new Error(`Unknown storyId ${storyId}`);
+    const {
+      importPath,
+      title
+    } = entry;
+    const moduleExports = this.moduleExportsByImportPath[importPath];
+    const csfFile = this.storyStore.processCSFFileWithCache(moduleExports, importPath, title);
+    return this.storyStore.storyFromCSFFile({
+      storyId,
+      csfFile
+    });
+  }
+
+}

package/dist/esm/blocks/Meta.js

@@ -13,6 +13,11 @@ function getFirstStoryId(docsContext) {
 
 function renderAnchor() {
   const context = useContext(DocsContext);
+
+  if (context.type !== 'legacy') {
+    return null;
+  }
+
   const anchorId = getFirstStoryId(context) || context.id;
   return /*#__PURE__*/React.createElement(Anchor, {
     storyId: anchorId
@@ -24,8 +29,17 @@ function renderAnchor() {
  */
 
 
-export const Meta = () => {
-  const params = new URL(document.location).searchParams;
-  const isDocs = params.get('viewMode') === 'docs';
+export const Meta = ({
+  of
+}) => {
+  let isDocs = true;
+
+  if (document) {
+    const params = new URL(document.location).searchParams;
+    isDocs = params.get('viewMode') === 'docs';
+  }
+
+  const context = useContext(DocsContext);
+  if (of) context.setMeta(of);
   return isDocs ? renderAnchor() : null;
 };

package/dist/esm/blocks/Source.js

@@ -71,9 +71,15 @@ export const getSourceProps = (props, docsContext, sourceContext) => {
     id: currentId,
     storyById
   } = docsContext;
-  const {
-    parameters
-  } = storyById(currentId);
+  let parameters = {};
+
+  try {
+    ({
+      parameters
+    } = storyById(currentId));
+  } catch (err) {// TODO: in external mode, there is no "current"
+  }
+
   const codeProps = props;
   const singleProps = props;
   const multiProps = props;

package/dist/esm/blocks/Story.js

@@ -12,8 +12,15 @@ export const lookupStoryId = (storyName, {
 }) => toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[storyName]));
 export const getStoryId = (props, context) => {
   const {
-    id
+    id,
+    of,
+    meta
   } = props;
+
+  if (of) {
+    return context.storyIdByModuleExport(of, meta);
+  }
+
   const {
     name
   } = props;
@@ -26,8 +33,8 @@ export const getStoryProps = ({
 }, story) => {
   const {
     name: storyName,
-    parameters
-  } = story;
+    parameters = {}
+  } = story || {};
   const {
     docs = {}
   } = parameters;
@@ -44,7 +51,7 @@ export const getStoryProps = ({
   const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
   return Object.assign({
     inline: storyIsInline,
-    id: story.id,
+    id: story?.id,
     height: height || (storyIsInline ? undefined : iframeHeight),
     title: storyName
   }, storyIsInline && {
@@ -80,7 +87,9 @@ const Story = props => {
     return null;
   }
 
-  if (storyProps.inline) {
+  const inline = context.type === 'external' || storyProps.inline;
+
+  if (inline) {
     // We do this so React doesn't complain when we replace the span in a secondary render
     const htmlContents = `<span></span>`; // FIXME: height/style/etc. lifted from PureStory
 
@@ -91,7 +100,7 @@ const Story = props => {
       id: storyBlockIdFromId(story.id)
     }, /*#__PURE__*/React.createElement(MDXProvider, {
       components: resetComponents
-    }, height ? /*#__PURE__*/React.createElement("style", null, `#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`) : null, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
+    }, height ? /*#__PURE__*/React.createElement("style", null, `#story--${story.id} { min-height: ${height}px; transform: translateZ(0); overflow: auto }`) : null, showLoader && /*#__PURE__*/React.createElement(StorySkeleton, null), /*#__PURE__*/React.createElement("div", {
       ref: storyRef,
       "data-name": story.name,
       dangerouslySetInnerHTML: {

package/dist/esm/blocks/index.js

@@ -6,6 +6,9 @@ export * from './Description';
 export * from './DocsContext';
 export * from './DocsPage';
 export * from './DocsContainer';
+export * from './DocsRenderer'; // For testing
+
+export * from './ExternalDocsContainer';
 export * from './DocsStory';
 export * from './Heading';
 export * from './Meta';

package/dist/esm/blocks/useStory.js

@@ -4,11 +4,9 @@ export function useStory(storyId, context) {
   return stories && stories[0];
 }
 export function useStories(storyIds, context) {
-  const initialStoriesById = context.componentStories().reduce((acc, story) => {
-    acc[story.id] = story;
-    return acc;
-  }, {});
-  const [storiesById, setStories] = useState(initialStoriesById);
+  // Legacy docs pages can reference any story by id. Those stories will need to be
+  // asyncronously loaded; we use the state for this
+  const [storiesById, setStories] = useState({});
   useEffect(() => {
     Promise.all(storyIds.map(async storyId => {
       // loadStory will be called every single time useStory is called
@@ -23,5 +21,14 @@ export function useStories(storyIds, context) {
       }));
     }));
   });
-  return storyIds.map(storyId => storiesById[storyId]);
+  return storyIds.map(storyId => {
+    if (storiesById[storyId]) return storiesById[storyId];
+
+    try {
+      // If we are allowed to load this story id synchonously, this will work
+      return context.storyById(storyId);
+    } catch (err) {
+      return null;
+    }
+  });
 }

package/dist/esm/preview.js

@@ -1,6 +1,10 @@
 export const parameters = {
   docs: {
-    getContainer: async () => (await import('./blocks')).DocsContainer,
-    getPage: async () => (await import('./blocks')).DocsPage
+    renderer: async () => {
+      const {
+        DocsRenderer
+      } = await import('./blocks/DocsRenderer');
+      return new DocsRenderer();
+    }
   }
 };

package/dist/types/blocks/DocsRenderer.d.ts

@@ -0,0 +1,7 @@
+import { AnyFramework } from '@storybook/csf';
+import { DocsRenderFunction } from '@storybook/preview-web';
+export declare class DocsRenderer<TFramework extends AnyFramework> {
+    render: DocsRenderFunction<TFramework>;
+    unmount: (element: HTMLElement) => void;
+    constructor();
+}

package/dist/types/blocks/ExternalDocsContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ExternalDocsContainer: React.FC<{
+    projectAnnotations: any;
+}>;

package/dist/types/blocks/ExternalPreview.d.ts

@@ -0,0 +1,19 @@
+import { Preview } from '@storybook/preview-web';
+import { ModuleExports, ModuleExport } from '@storybook/store';
+import { AnyFramework, StoryId, ProjectAnnotations } from '@storybook/csf';
+declare type StoryExport = ModuleExport;
+declare type MetaExport = ModuleExports;
+export declare class ExternalPreview<TFramework extends AnyFramework> extends Preview<TFramework> {
+    projectAnnotations: ProjectAnnotations;
+    private initialized;
+    private importPaths;
+    private titles;
+    storyIds: Map<any, string>;
+    private storyIndex;
+    private moduleExportsByImportPath;
+    constructor(projectAnnotations: ProjectAnnotations);
+    storyIdByModuleExport(storyExport: StoryExport, meta: MetaExport): string;
+    addStoryFromExports(storyExport: StoryExport, meta: MetaExport): Promise<void>;
+    storyById(storyId: StoryId): import("@storybook/store").Story<TFramework>;
+}
+export {};

package/dist/types/blocks/Meta.d.ts

@@ -1,6 +1,9 @@
 import { FC } from 'react';
 import { BaseAnnotations } from '@storybook/csf';
-declare type MetaProps = BaseAnnotations;
+import type { ModuleExports } from '@storybook/store';
+declare type MetaProps = BaseAnnotations & {
+    of?: ModuleExports;
+};
 /**
  * This component is used to declare component metadata in docs
  * and gets transformed into a default export underneath the hood.

package/dist/types/blocks/Story.d.ts

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode, ElementType, ComponentProps } from 'react';
 import { Story as PureStory } from '@storybook/components';
 import { StoryId, StoryAnnotations, AnyFramework } from '@storybook/csf';
-import type { Story as StoryType } from '@storybook/store';
+import type { ModuleExport, ModuleExports, Story as StoryType } from '@storybook/store';
 import { DocsContextProps } from './DocsContext';
 export declare const storyBlockIdFromId: (storyId: string) => string;
 declare type PureStoryProps = ComponentProps<typeof PureStory>;
@@ -15,6 +15,8 @@ declare type StoryDefProps = {
 };
 declare type StoryRefProps = {
     id?: string;
+    of?: ModuleExport;
+    meta?: ModuleExports;
 };
 declare type StoryImportProps = {
     name: string;

package/dist/types/blocks/index.d.ts

@@ -6,6 +6,8 @@ export * from './Description';
 export * from './DocsContext';
 export * from './DocsPage';
 export * from './DocsContainer';
+export * from './DocsRenderer';
+export * from './ExternalDocsContainer';
 export * from './DocsStory';
 export * from './Heading';
 export * from './Meta';

package/dist/types/preview.d.ts

@@ -1,6 +1,5 @@
 export declare const parameters: {
     docs: {
-        getContainer: () => Promise<import("react").FunctionComponent<import("./blocks").DocsContainerProps<import("@storybook/csf").AnyFramework>>>;
-        getPage: () => Promise<import("react").FC<{}>>;
+        renderer: () => Promise<import("./blocks/DocsRenderer").DocsRenderer<import("@storybook/csf").AnyFramework>>;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.6",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -52,21 +52,21 @@
     "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "7.0.0-alpha.5",
-    "@storybook/api": "7.0.0-alpha.5",
-    "@storybook/components": "7.0.0-alpha.5",
-    "@storybook/core-common": "7.0.0-alpha.5",
-    "@storybook/core-events": "7.0.0-alpha.5",
+    "@storybook/addons": "7.0.0-alpha.6",
+    "@storybook/api": "7.0.0-alpha.6",
+    "@storybook/components": "7.0.0-alpha.6",
+    "@storybook/core-common": "7.0.0-alpha.6",
+    "@storybook/core-events": "7.0.0-alpha.6",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/csf-tools": "7.0.0-alpha.5",
-    "@storybook/docs-tools": "7.0.0-alpha.5",
+    "@storybook/csf-tools": "7.0.0-alpha.6",
+    "@storybook/docs-tools": "7.0.0-alpha.6",
     "@storybook/mdx1-csf": "^0.0.1",
-    "@storybook/node-logger": "7.0.0-alpha.5",
-    "@storybook/postinstall": "7.0.0-alpha.5",
-    "@storybook/preview-web": "7.0.0-alpha.5",
-    "@storybook/source-loader": "7.0.0-alpha.5",
-    "@storybook/store": "7.0.0-alpha.5",
-    "@storybook/theming": "7.0.0-alpha.5",
+    "@storybook/node-logger": "7.0.0-alpha.6",
+    "@storybook/postinstall": "7.0.0-alpha.6",
+    "@storybook/preview-web": "7.0.0-alpha.6",
+    "@storybook/source-loader": "7.0.0-alpha.6",
+    "@storybook/store": "7.0.0-alpha.6",
+    "@storybook/theming": "7.0.0-alpha.6",
     "babel-loader": "^8.2.5",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
@@ -101,7 +101,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3dd46982823b34d9f37be917b6247631081feff7",
+  "gitHead": "a88dcca40ba169a373bad33dd76e9a4bd4f1f5ec",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",