@storybook/addon-docs 7.0.0-alpha.3 → 7.0.0-alpha.33

package/README.md

@@ -37,7 +37,7 @@ Click on the `Docs` tab to see it:
   <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/docs-tab.png" width="100%" />
 </center>
 
-For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md).
+For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/docspage.md).
 
 ## MDX
 
@@ -73,7 +73,7 @@ And here's how that's rendered in Storybook:
   <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/addons/docs/docs/media/mdx-simple.png" width="100%" />
 </center>
 
-For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md).
+For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/docs/mdx.md).
 
 ## Framework support
 
@@ -81,10 +81,9 @@ Storybook Docs supports all view layers that Storybook supports except for React
 
 [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
-
 **Note:** `#` = WIP support
 
-Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/multiframework.md)
+Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/multiframework.md)
 
 ## Installation
 
@@ -109,7 +108,7 @@ module.exports = {
 };
 ```
 
-If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/README.md), you will need to
+If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots/storyshots-core/README.md), you will need to
 configure Jest to transform MDX stories into something Storyshots can understand:
 
 Add the following to your Jest configuration:
@@ -125,12 +124,12 @@ Add the following to your Jest configuration:
 
 ### Be sure to check framework specific installation needs
 
-- [React](https://github.com/storybookjs/storybook/tree/next/addons/docs/react) (covered here)
-- [Vue](https://github.com/storybookjs/storybook/tree/next/addons/docs/vue)
-- [Angular](https://github.com/storybookjs/storybook/tree/next/addons/docs/angular)
-- [Ember](https://github.com/storybookjs/storybook/tree/next/addons/docs/ember)
-- [Web Components](https://github.com/storybookjs/storybook/tree/next/addons/docs/web-components)
-- [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/addons/docs/common)
+- [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)
+- [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue)
+- [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular)
+- [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember)
+- [Web Components](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components)
+- [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/common)
 
 ## Preset options
 
@@ -230,12 +229,12 @@ addParameters({
 
 ## TypeScript configuration
 
-As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md).
+As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
 
 ## More resources
 
 Want to learn more? Here are some more articles on Storybook Docs:
 
-- References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md)
+- References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)

package/angular/index.js

@@ -2,6 +2,6 @@
 /* global window */
 
 export const setCompodocJson = (compodocJson) => {
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };

package/blocks.js

@@ -1,5 +1,5 @@
 import deprecate from 'util-deprecate';
-import dedent from 'ts-dedent';
+import { dedent } from 'ts-dedent';
 
 const warnBlocksImport = deprecate(
   () => {},

package/dist/cjs/DocsRenderer.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultComponents = exports.DocsRenderer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _components = require("@storybook/components");
+
+var _blocks = require("@storybook/blocks");
+
+var _react2 = require("@mdx-js/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// TS doesn't like that we export a component with types that it doesn't know about (TS4203)
+const defaultComponents = Object.assign({}, _components.components, {
+  code: _blocks.CodeOrSourceMdx,
+  a: _blocks.AnchorMdx
+}, _blocks.HeadersMdx);
+exports.defaultComponents = defaultComponents;
+
+class DocsRenderer {
+  constructor() {
+    this.render = void 0;
+    this.unmount = void 0;
+
+    this.render = (context, docsParameter, element, callback) => {
+      // Use a random key to force the container to re-render each time we call `renderDocs`
+      //   TODO: do we still need this? It was needed for angular (legacy) inline rendering:
+      //   https://github.com/storybookjs/storybook/pull/16149
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
+        components: defaultComponents
+      }, /*#__PURE__*/_react.default.createElement(_blocks.Docs, {
+        key: Math.random(),
+        context: context,
+        docsParameter: docsParameter
+      })), element, callback);
+    };
+
+    this.unmount = element => {
+      _reactDom.default.unmountComponentAtNode(element);
+    };
+  }
+
+}
+
+exports.DocsRenderer = DocsRenderer;

package/dist/cjs/blocks/index.js

@@ -3,364 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  ColorPalette: true,
-  ColorItem: true,
-  IconGallery: true,
-  IconItem: true,
-  Typeset: true
-};
-Object.defineProperty(exports, "ColorItem", {
-  enumerable: true,
-  get: function () {
-    return _components.ColorItem;
-  }
-});
-Object.defineProperty(exports, "ColorPalette", {
-  enumerable: true,
-  get: function () {
-    return _components.ColorPalette;
-  }
-});
-Object.defineProperty(exports, "IconGallery", {
-  enumerable: true,
-  get: function () {
-    return _components.IconGallery;
-  }
-});
-Object.defineProperty(exports, "IconItem", {
-  enumerable: true,
-  get: function () {
-    return _components.IconItem;
-  }
-});
-Object.defineProperty(exports, "Typeset", {
-  enumerable: true,
-  get: function () {
-    return _components.Typeset;
-  }
-});
-
-var _components = require("@storybook/components");
-
-var _Anchor = require("./Anchor");
-
-Object.keys(_Anchor).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Anchor[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Anchor[key];
-    }
-  });
-});
-
-var _ArgsTable = require("./ArgsTable");
-
-Object.keys(_ArgsTable).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ArgsTable[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ArgsTable[key];
-    }
-  });
-});
-
-var _Canvas = require("./Canvas");
-
-Object.keys(_Canvas).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Canvas[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Canvas[key];
-    }
-  });
-});
-
-var _Description = require("./Description");
-
-Object.keys(_Description).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Description[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Description[key];
-    }
-  });
-});
-
-var _DocsContext = require("./DocsContext");
-
-Object.keys(_DocsContext).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DocsContext[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DocsContext[key];
-    }
-  });
-});
-
-var _DocsPage = require("./DocsPage");
-
-Object.keys(_DocsPage).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DocsPage[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DocsPage[key];
-    }
-  });
-});
-
-var _DocsContainer = require("./DocsContainer");
-
-Object.keys(_DocsContainer).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DocsContainer[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DocsContainer[key];
-    }
-  });
-});
-
-var _DocsStory = require("./DocsStory");
-
-Object.keys(_DocsStory).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DocsStory[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DocsStory[key];
-    }
-  });
-});
-
-var _Heading = require("./Heading");
-
-Object.keys(_Heading).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Heading[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Heading[key];
-    }
-  });
-});
-
-var _Meta = require("./Meta");
-
-Object.keys(_Meta).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Meta[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Meta[key];
-    }
-  });
-});
-
-var _Preview = require("./Preview");
-
-Object.keys(_Preview).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Preview[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Preview[key];
-    }
-  });
-});
-
-var _Primary = require("./Primary");
-
-Object.keys(_Primary).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Primary[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Primary[key];
-    }
-  });
-});
-
-var _Props = require("./Props");
-
-Object.keys(_Props).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Props[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Props[key];
-    }
-  });
-});
-
-var _Source = require("./Source");
-
-Object.keys(_Source).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Source[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Source[key];
-    }
-  });
-});
-
-var _SourceContainer = require("./SourceContainer");
-
-Object.keys(_SourceContainer).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SourceContainer[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _SourceContainer[key];
-    }
-  });
-});
-
-var _Stories = require("./Stories");
-
-Object.keys(_Stories).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Stories[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Stories[key];
-    }
-  });
-});
-
-var _Story = require("./Story");
-
-Object.keys(_Story).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Story[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Story[key];
-    }
-  });
-});
-
-var _Subheading = require("./Subheading");
-
-Object.keys(_Subheading).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Subheading[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Subheading[key];
-    }
-  });
-});
-
-var _Subtitle = require("./Subtitle");
-
-Object.keys(_Subtitle).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Subtitle[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Subtitle[key];
-    }
-  });
-});
-
-var _Title = require("./Title");
-
-Object.keys(_Title).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Title[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Title[key];
-    }
-  });
-});
-
-var _Wrapper = require("./Wrapper");
-
-Object.keys(_Wrapper).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Wrapper[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Wrapper[key];
-    }
-  });
-});
-
-var _types = require("./types");
-
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _types[key];
-    }
-  });
-});
 
-var _mdx = require("./mdx");
+var _blocks = require("@storybook/blocks");
 
-Object.keys(_mdx).forEach(function (key) {
+Object.keys(_blocks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _mdx[key]) return;
+  if (key in exports && exports[key] === _blocks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _mdx[key];
+      return _blocks[key];
     }
   });
 });

package/dist/cjs/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  DocsRenderer: true
+};
+Object.defineProperty(exports, "DocsRenderer", {
+  enumerable: true,
+  get: function () {
+    return _DocsRenderer.DocsRenderer;
+  }
+});
 
 var _blocks = require("./blocks");
 
 Object.keys(_blocks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _blocks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -15,4 +25,6 @@ Object.keys(_blocks).forEach(function (key) {
       return _blocks[key];
     }
   });
-});
+});
+
+var _DocsRenderer = require("./DocsRenderer");

package/dist/cjs/preset.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.storyIndexers = void 0;
+exports.storyIndexers = exports.docs = void 0;
 exports.webpack = webpack;
 
 var _fsExtra = _interopRequireDefault(require("fs-extra"));
@@ -64,6 +64,7 @@ async function webpack(webpackConfig = {}, options) {
     transcludeMarkdown = false
   } = options;
   const mdxLoaderOptions = {
+    // whether to skip storybook files, useful for docs only mdx or md files
     skipCsf: true,
     remarkPlugins: [_remarkSlug.default, _remarkExternalLinks.default]
   };
@@ -116,7 +117,10 @@ async function webpack(webpackConfig = {}, options) {
             configureJSX
           })
         }, {
-          loader: mdxLoader
+          loader: mdxLoader,
+          options: Object.assign({}, mdxLoaderOptions, {
+            skipCsf: false
+          })
         }]
       }, {
         test: /\.mdx$/,
@@ -142,7 +146,7 @@ const storyIndexers = async indexers => {
   const mdxIndexer = async (fileName, opts) => {
     var _global$FEATURES3;
 
-    let code = (await _fsExtra.default.readFile(fileName, 'utf-8')).toString(); // @ts-ignore
+    let code = (await _fsExtra.default.readFile(fileName, 'utf-8')).toString(); // @ts-expect-error (Converted from ts-ignore)
 
     const {
       compile
@@ -155,8 +159,19 @@ const storyIndexers = async indexers => {
 
   return [{
     test: /(stories|story)\.mdx$/,
-    indexer: mdxIndexer
+    indexer: mdxIndexer,
+    addDocsTemplate: true
   }, ...(indexers || [])];
 };
 
-exports.storyIndexers = storyIndexers;
+exports.storyIndexers = storyIndexers;
+
+const docs = docsOptions => {
+  return Object.assign({}, docsOptions, {
+    enabled: true,
+    defaultName: 'Docs',
+    docsPage: true
+  });
+};
+
+exports.docs = docs;

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('./DocsRenderer')));
+      return new DocsRenderer();
+    }
   }
 };
 exports.parameters = parameters;

package/dist/esm/DocsRenderer.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { components as htmlComponents } from '@storybook/components';
+import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
+import { MDXProvider } from '@mdx-js/react'; // TS doesn't like that we export a component with types that it doesn't know about (TS4203)
+
+export const defaultComponents = Object.assign({}, htmlComponents, {
+  code: CodeOrSourceMdx,
+  a: AnchorMdx
+}, HeadersMdx);
+export class DocsRenderer {
+  constructor() {
+    this.render = void 0;
+    this.unmount = void 0;
+
+    this.render = (context, docsParameter, element, callback) => {
+      // Use a random key to force the container to re-render each time we call `renderDocs`
+      //   TODO: do we still need this? It was needed for angular (legacy) inline rendering:
+      //   https://github.com/storybookjs/storybook/pull/16149
+      ReactDOM.render( /*#__PURE__*/React.createElement(MDXProvider, {
+        components: defaultComponents
+      }, /*#__PURE__*/React.createElement(Docs, {
+        key: Math.random(),
+        context: context,
+        docsParameter: docsParameter
+      })), element, callback);
+    };
+
+    this.unmount = element => {
+      ReactDOM.unmountComponentAtNode(element);
+    };
+  }
+
+}

package/dist/esm/blocks/index.js

@@ -1,24 +1 @@
-export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
-export * from './Anchor';
-export * from './ArgsTable';
-export * from './Canvas';
-export * from './Description';
-export * from './DocsContext';
-export * from './DocsPage';
-export * from './DocsContainer';
-export * from './DocsStory';
-export * from './Heading';
-export * from './Meta';
-export * from './Preview';
-export * from './Primary';
-export * from './Props';
-export * from './Source';
-export * from './SourceContainer';
-export * from './Stories';
-export * from './Story';
-export * from './Subheading';
-export * from './Subtitle';
-export * from './Title';
-export * from './Wrapper';
-export * from './types';
-export * from './mdx';
+export * from '@storybook/blocks';

package/dist/esm/index.js

@@ -1 +1,2 @@
-export * from './blocks';
+export * from './blocks';
+export { DocsRenderer } from './DocsRenderer';