@storybook/addon-docs 7.0.0-alpha.4 → 7.0.0-alpha.7

package/dist/cjs/blocks/ArgsTable.js

@@ -205,7 +205,7 @@ const StoryTable = props => {
       }
     }; // Use the dynamically generated component tabs if there are no controls
 
-    const storyHasArgsWithControls = argTypes && Object.values(argTypes).find(v => !!(v !== null && v !== void 0 && v.control));
+    const storyHasArgsWithControls = argTypes && Object.values(argTypes).find(v => !!v?.control);
 
     if (!storyHasArgsWithControls) {
       updateArgs = null;
@@ -278,7 +278,7 @@ const ArgsTable = props => {
   const {
     story: storyName
   } = props;
-  const sort = sortProp || (controls === null || controls === void 0 ? void 0 : controls.sort);
+  const sort = sortProp || controls?.sort;
   const main = getComponent(props, context);
 
   if (storyName) {

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/Description.js

@@ -67,7 +67,7 @@ const getDescriptionProps = ({
   } = docs || {};
   const target = of === _types.CURRENT_SELECTION ? component : of; // override component description
 
-  const componentDescriptionParameter = description === null || description === void 0 ? void 0 : description.component;
+  const componentDescriptionParameter = description?.component;
 
   if (componentDescriptionParameter) {
     return {

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,48 @@
+"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) {
+  const Container = docsParameters.container || (await docsParameters.getContainer?.()) || _DocsContainer.DocsContainer;
+  const Page = docsParameters.page || (await docsParameters.getPage?.()) || _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/DocsStory.js

@@ -42,9 +42,7 @@ const DocsStory = ({
   } = parameters;
 
   if (expanded && docs) {
-    var _docs$description;
-
-    description = (_docs$description = docs.description) === null || _docs$description === void 0 ? void 0 : _docs$description.story;
+    description = docs.description?.story;
 
     if (!description) {
       description = docs.storyDescription;

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

@@ -35,11 +35,7 @@ exports.SourceState = SourceState;
 })(SourceState || (exports.SourceState = SourceState = {}));
 
 const getSourceState = stories => {
-  const states = stories.map(story => {
-    var _story$parameters$doc, _story$parameters$doc2;
-
-    return (_story$parameters$doc = story.parameters.docs) === null || _story$parameters$doc === void 0 ? void 0 : (_story$parameters$doc2 = _story$parameters$doc.source) === null || _story$parameters$doc2 === void 0 ? void 0 : _story$parameters$doc2.state;
-  }).filter(Boolean);
+  const states = stories.map(story => story.parameters.docs?.source?.state).filter(Boolean);
   if (states.length === 0) return SourceState.CLOSED; // FIXME: handling multiple stories is a pain
 
   return states[0];
@@ -51,15 +47,13 @@ const getStorySource = (storyId, sourceContext) => {
   } = sourceContext; // source rendering is async so source is unavailable at the start of the render cycle,
   // so we fail gracefully here without warning
 
-  return (sources === null || sources === void 0 ? void 0 : sources[storyId]) || {
+  return sources?.[storyId] || {
     code: '',
     format: false
   };
 };
 
 const getSnippet = (snippet, story) => {
-  var _parameters$docs, _parameters$docs$sour, _parameters$docs2, _parameters$docs2$sou, _enhanced$docs, _enhanced$docs$source;
-
   if (!story) {
     return snippet;
   }
@@ -69,9 +63,9 @@ const getSnippet = (snippet, story) => {
   } = story; // eslint-disable-next-line no-underscore-dangle
 
   const isArgsStory = parameters.__isArgsStory;
-  const type = ((_parameters$docs = parameters.docs) === null || _parameters$docs === void 0 ? void 0 : (_parameters$docs$sour = _parameters$docs.source) === null || _parameters$docs$sour === void 0 ? void 0 : _parameters$docs$sour.type) || _shared.SourceType.AUTO; // if user has hard-coded the snippet, that takes precedence
+  const type = parameters.docs?.source?.type || _shared.SourceType.AUTO; // if user has hard-coded the snippet, that takes precedence
 
-  const userCode = (_parameters$docs2 = parameters.docs) === null || _parameters$docs2 === void 0 ? void 0 : (_parameters$docs2$sou = _parameters$docs2.source) === null || _parameters$docs2$sou === void 0 ? void 0 : _parameters$docs2$sou.code;
+  const userCode = parameters.docs?.source?.code;
 
   if (userCode !== undefined) {
     return userCode;
@@ -79,21 +73,17 @@ const getSnippet = (snippet, story) => {
 
 
   if (type === _shared.SourceType.DYNAMIC) {
-    var _parameters$docs3, _parameters$docs3$tra;
-
-    return ((_parameters$docs3 = parameters.docs) === null || _parameters$docs3 === void 0 ? void 0 : (_parameters$docs3$tra = _parameters$docs3.transformSource) === null || _parameters$docs3$tra === void 0 ? void 0 : _parameters$docs3$tra.call(_parameters$docs3, snippet, story)) || snippet;
+    return parameters.docs?.transformSource?.(snippet, story) || snippet;
   } // if this is an args story and there's a snippet
 
 
   if (type === _shared.SourceType.AUTO && snippet && isArgsStory) {
-    var _parameters$docs4, _parameters$docs4$tra;
-
-    return ((_parameters$docs4 = parameters.docs) === null || _parameters$docs4 === void 0 ? void 0 : (_parameters$docs4$tra = _parameters$docs4.transformSource) === null || _parameters$docs4$tra === void 0 ? void 0 : _parameters$docs4$tra.call(_parameters$docs4, snippet, story)) || snippet;
+    return parameters.docs?.transformSource?.(snippet, story) || snippet;
   } // otherwise, use the source code logic
 
 
   const enhanced = (0, _enhanceSource.enhanceSource)(story) || parameters;
-  return (enhanced === null || enhanced === void 0 ? void 0 : (_enhanced$docs = enhanced.docs) === null || _enhanced$docs === void 0 ? void 0 : (_enhanced$docs$source = _enhanced$docs.source) === null || _enhanced$docs$source === void 0 ? void 0 : _enhanced$docs$source.code) || '';
+  return enhanced?.docs?.source?.code || '';
 };
 
 const getSourceProps = (props, docsContext, sourceContext) => {
@@ -101,9 +91,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/Stories.js

@@ -27,11 +27,7 @@ const Stories = ({
     componentStories
   } = (0, _react.useContext)(_DocsContext.DocsContext);
   let stories = componentStories();
-  stories = stories.filter(story => {
-    var _story$parameters, _story$parameters$doc;
-
-    return !((_story$parameters = story.parameters) !== null && _story$parameters !== void 0 && (_story$parameters$doc = _story$parameters.docs) !== null && _story$parameters$doc !== void 0 && _story$parameters$doc.disable);
-  });
+  stories = stories.filter(story => !story.parameters?.docs?.disable);
   if (!includePrimary) stories = stories.slice(1);
 
   if (!stories || stories.length === 0) {

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?.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/Subtitle.js

@@ -28,7 +28,7 @@ const Subtitle = ({
   let text = children;
 
   if (!text) {
-    text = parameters === null || parameters === void 0 ? void 0 : parameters.componentSubtitle;
+    text = parameters?.componentSubtitle;
   }
 
   return text ? /*#__PURE__*/_react.default.createElement(_components.Subtitle, {

package/dist/cjs/blocks/enhanceSource.js

@@ -60,8 +60,6 @@ const extract = (targetId, {
 };
 
 const enhanceSource = story => {
-  var _docs$source;
-
   const {
     id,
     parameters
@@ -74,7 +72,7 @@ const enhanceSource = story => {
     transformSource
   } = docs; // no input or user has manually overridden the output
 
-  if (!(storySource !== null && storySource !== void 0 && storySource.source) || (_docs$source = docs.source) !== null && _docs$source !== void 0 && _docs$source.code) {
+  if (!storySource?.source || docs.source?.code) {
     return null;
   }
 

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/preset.js

@@ -29,7 +29,7 @@ function createBabelOptions({
   mdxBabelOptions,
   configureJSX
 }) {
-  const babelPlugins = (mdxBabelOptions === null || mdxBabelOptions === void 0 ? void 0 : mdxBabelOptions.plugins) || (babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) || [];
+  const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
   const jsxPlugin = [require.resolve('@babel/plugin-transform-react-jsx'), {
     pragma: 'React.createElement',
     pragmaFrag: 'React.Fragment'
@@ -45,8 +45,6 @@ function createBabelOptions({
 }
 
 async function webpack(webpackConfig = {}, options) {
-  var _global$FEATURES, _global$FEATURES2;
-
   const resolvedBabelLoader = require.resolve('babel-loader');
 
   const {
@@ -67,11 +65,11 @@ async function webpack(webpackConfig = {}, options) {
     skipCsf: true,
     remarkPlugins: [_remarkSlug.default, _remarkExternalLinks.default]
   };
-  const mdxVersion = (_global$FEATURES = _global.default.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.previewMdx2 ? 'MDX2' : 'MDX1';
+  const mdxVersion = _global.default.FEATURES?.previewMdx2 ? 'MDX2' : 'MDX1';
 
   _nodeLogger.logger.info(`Addon-docs: using ${mdxVersion}`);
 
-  const mdxLoader = (_global$FEATURES2 = _global.default.FEATURES) !== null && _global$FEATURES2 !== void 0 && _global$FEATURES2.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
+  const mdxLoader = _global.default.FEATURES?.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
 
   const sourceLoader = sourceLoaderOptions ? [{
     test: /\.(stories|story)\.[tj]sx?$/,
@@ -84,11 +82,7 @@ async function webpack(webpackConfig = {}, options) {
   let rules = module.rules || [];
 
   if (transcludeMarkdown) {
-    rules = [...rules.filter(rule => {
-      var _rule$test;
-
-      return ((_rule$test = rule.test) === null || _rule$test === void 0 ? void 0 : _rule$test.toString()) !== '/\\.md$/';
-    }), {
+    rules = [...rules.filter(rule => rule.test?.toString() !== '/\\.md$/'), {
       test: /\.md$/,
       use: [{
         loader: resolvedBabelLoader,
@@ -140,13 +134,11 @@ async function webpack(webpackConfig = {}, options) {
 
 const storyIndexers = async indexers => {
   const mdxIndexer = async (fileName, opts) => {
-    var _global$FEATURES3;
-
     let code = (await _fsExtra.default.readFile(fileName, 'utf-8')).toString(); // @ts-ignore
 
     const {
       compile
-    } = (_global$FEATURES3 = _global.default.FEATURES) !== null && _global$FEATURES3 !== void 0 && _global$FEATURES3.previewMdx2 ? await Promise.resolve().then(() => _interopRequireWildcard(require('@storybook/mdx2-csf'))) : await Promise.resolve().then(() => _interopRequireWildcard(require('@storybook/mdx1-csf')));
+    } = _global.default.FEATURES?.previewMdx2 ? await Promise.resolve().then(() => _interopRequireWildcard(require('@storybook/mdx2-csf'))) : await Promise.resolve().then(() => _interopRequireWildcard(require('@storybook/mdx1-csf')));
     code = await compile(code, {});
     return (0, _csfTools.loadCsf)(code, Object.assign({}, opts, {
       fileName

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.4",
+  "version": "7.0.0-alpha.7",
   "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.4",
-    "@storybook/api": "7.0.0-alpha.4",
-    "@storybook/components": "7.0.0-alpha.4",
-    "@storybook/core-common": "7.0.0-alpha.4",
-    "@storybook/core-events": "7.0.0-alpha.4",
+    "@storybook/addons": "7.0.0-alpha.7",
+    "@storybook/api": "7.0.0-alpha.7",
+    "@storybook/components": "7.0.0-alpha.7",
+    "@storybook/core-common": "7.0.0-alpha.7",
+    "@storybook/core-events": "7.0.0-alpha.7",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/csf-tools": "7.0.0-alpha.4",
-    "@storybook/docs-tools": "7.0.0-alpha.4",
+    "@storybook/csf-tools": "7.0.0-alpha.7",
+    "@storybook/docs-tools": "7.0.0-alpha.7",
     "@storybook/mdx1-csf": "^0.0.1",
-    "@storybook/node-logger": "7.0.0-alpha.4",
-    "@storybook/postinstall": "7.0.0-alpha.4",
-    "@storybook/preview-web": "7.0.0-alpha.4",
-    "@storybook/source-loader": "7.0.0-alpha.4",
-    "@storybook/store": "7.0.0-alpha.4",
-    "@storybook/theming": "7.0.0-alpha.4",
+    "@storybook/node-logger": "7.0.0-alpha.7",
+    "@storybook/postinstall": "7.0.0-alpha.7",
+    "@storybook/preview-web": "7.0.0-alpha.7",
+    "@storybook/source-loader": "7.0.0-alpha.7",
+    "@storybook/store": "7.0.0-alpha.7",
+    "@storybook/theming": "7.0.0-alpha.7",
     "babel-loader": "^8.2.5",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
@@ -101,7 +101,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "006ed54452dd7c37a8cbe91a84f5312182f7ca00",
+  "gitHead": "d334cabd251cd0ed8b845a87707dc84f007d4074",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",