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

package/README.md

@@ -23,7 +23,6 @@ Read on to learn more:
   - [Installation](#installation)
     - [Be sure to check framework specific installation needs](#be-sure-to-check-framework-specific-installation-needs)
   - [Preset options](#preset-options)
-  - [Manual configuration](#manual-configuration)
   - [TypeScript configuration](#typescript-configuration)
   - [More resources](#more-resources)
 
@@ -37,7 +36,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 +72,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 +80,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 +107,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 +123,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
 
@@ -167,75 +165,14 @@ import Changelog from '../CHANGELOG.md';
 <Changelog />
 ```
 
-## Manual configuration
-
-We recommend using the preset, which should work out of the box. If you don't want to use the preset, and prefer to configure "the long way" add the following configuration to `.storybook/main.js` (see comments inline for explanation):
-
-```js
-const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
-
-module.exports = {
-  // 1. register the docs panel (as opposed to '@storybook/addon-docs' which
-  //    will configure everything with a preset)
-  addons: ['@storybook/addon-docs/register'],
-  // 2. manually configure webpack, since you're not using the preset
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      // 2a. Load `.stories.mdx` / `.story.mdx` files as CSF and generate
-      //     the docs page from the markdown
-      test: /\.(stories|story)\.mdx$/,
-      use: [
-        {
-          // Need to add babel-loader as dependency: `yarn add -D babel-loader`
-          loader: require.resolve('babel-loader'),
-          // may or may not need this line depending on your app's setup
-          options: {
-            plugins: ['@babel/plugin-transform-react-jsx'],
-          },
-        },
-        {
-          loader: '@mdx-js/loader',
-          options: {
-            compilers: [createCompiler({})],
-          },
-        },
-      ],
-    });
-    // 2b. Run `source-loader` on story files to show their source code
-    //     automatically in `DocsPage` or the `Source` doc block.
-    config.module.rules.push({
-      test: /\.(stories|story)\.[tj]sx?$/,
-      loader: require.resolve('@storybook/source-loader'),
-      exclude: [/node_modules/],
-      enforce: 'pre',
-    });
-    return config;
-  },
-};
-```
-
-You'll also need to set up the docs parameter in `.storybook/preview.js`. This includes the `DocsPage` for rendering the page, a container, and various configuration options, such as `extractComponentDescription` for manually extracting a component description:
-
-```js
-import { addParameters } from '@storybook/react';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs';
-
-addParameters({
-  docs: {
-    container: DocsContainer,
-    page: DocsPage,
-  },
-});
-```
-
 ## 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/dist/cjs/DocsRenderer.js

@@ -0,0 +1,54 @@
+"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
+      const components = Object.assign({}, defaultComponents, docsParameter === null || docsParameter === void 0 ? void 0 : docsParameter.components);
+
+      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_react2.MDXProvider, {
+        components: components
+      }, /*#__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.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _blocks = require("@storybook/blocks");
+
+Object.keys(_blocks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _blocks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      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"));
@@ -12,8 +12,6 @@ var _remarkSlug = _interopRequireDefault(require("remark-slug"));
 
 var _remarkExternalLinks = _interopRequireDefault(require("remark-external-links"));
 
-var _global = _interopRequireDefault(require("global"));
-
 var _nodeLogger = require("@storybook/node-logger");
 
 var _csfTools = require("@storybook/csf-tools");
@@ -30,11 +28,20 @@ function createBabelOptions({
   configureJSX
 }) {
   const babelPlugins = (mdxBabelOptions === null || mdxBabelOptions === void 0 ? void 0 : mdxBabelOptions.plugins) || (babelOptions === null || babelOptions === void 0 ? void 0 : babelOptions.plugins) || [];
+  const filteredBabelPlugins = babelPlugins.filter(p => {
+    const name = Array.isArray(p) ? p[0] : p;
+
+    if (typeof name === 'string') {
+      return !name.includes('plugin-transform-react-jsx');
+    }
+
+    return true;
+  });
   const jsxPlugin = [require.resolve('@babel/plugin-transform-react-jsx'), {
     pragma: 'React.createElement',
     pragmaFrag: 'React.Fragment'
   }];
-  const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
+  const plugins = configureJSX ? [...filteredBabelPlugins, jsxPlugin] : babelPlugins;
   return Object.assign({
     // don't use the root babelrc by default (users can override this in mdxBabelOptions)
     babelrc: false,
@@ -45,10 +52,7 @@ function createBabelOptions({
 }
 
 async function webpack(webpackConfig = {}, options) {
-  var _global$FEATURES, _global$FEATURES2;
-
-  const resolvedBabelLoader = require.resolve('babel-loader');
-
+  const resolvedBabelLoader = await options.presets.apply('babelLoaderRef');
   const {
     module = {}
   } = webpackConfig; // it will reuse babel options that are already in use in storybook
@@ -64,14 +68,15 @@ 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]
   };
-  const mdxVersion = (_global$FEATURES = _global.default.FEATURES) !== null && _global$FEATURES !== void 0 && _global$FEATURES.previewMdx2 ? 'MDX2' : 'MDX1';
 
-  _nodeLogger.logger.info(`Addon-docs: using ${mdxVersion}`);
+  _nodeLogger.logger.info(`Addon-docs: using MDX2`);
+
+  const mdxLoader = require.resolve('@storybook/mdx2-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
 
-  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 sourceLoader = sourceLoaderOptions ? [{
     test: /\.(stories|story)\.[tj]sx?$/,
@@ -116,7 +121,10 @@ async function webpack(webpackConfig = {}, options) {
             configureJSX
           })
         }, {
-          loader: mdxLoader
+          loader: mdxLoader,
+          options: Object.assign({}, mdxLoaderOptions, {
+            skipCsf: false
+          })
         }]
       }, {
         test: /\.mdx$/,
@@ -140,13 +148,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
+    let code = (await _fsExtra.default.readFile(fileName, 'utf-8')).toString(); // @ts-expect-error (Converted from 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')));
+    } = await Promise.resolve().then(() => _interopRequireWildcard(require('@storybook/mdx2-csf')));
     code = await compile(code, {});
     return (0, _csfTools.loadCsf)(code, Object.assign({}, opts, {
       fileName
@@ -155,8 +161,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,35 @@
+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
+      const components = Object.assign({}, defaultComponents, docsParameter?.components);
+      ReactDOM.render( /*#__PURE__*/React.createElement(MDXProvider, {
+        components: components
+      }, /*#__PURE__*/React.createElement(Docs, {
+        key: Math.random(),
+        context: context,
+        docsParameter: docsParameter
+      })), element, callback);
+    };
+
+    this.unmount = element => {
+      ReactDOM.unmountComponentAtNode(element);
+    };
+  }
+
+}

package/dist/esm/blocks.js

@@ -0,0 +1 @@
+export * from '@storybook/blocks';

package/dist/esm/index.js

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

package/dist/esm/preset.js

@@ -1,7 +1,6 @@
 import fs from 'fs-extra';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
-import global from 'global';
 import { logger } from '@storybook/node-logger';
 import { loadCsf } from '@storybook/csf-tools'; // for frameworks that are not working with react, we need to configure
 // the jsx to transpile mdx, for now there will be a flag for that
@@ -13,11 +12,20 @@ function createBabelOptions({
   configureJSX
 }) {
   const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
+  const filteredBabelPlugins = babelPlugins.filter(p => {
+    const name = Array.isArray(p) ? p[0] : p;
+
+    if (typeof name === 'string') {
+      return !name.includes('plugin-transform-react-jsx');
+    }
+
+    return true;
+  });
   const jsxPlugin = [require.resolve('@babel/plugin-transform-react-jsx'), {
     pragma: 'React.createElement',
     pragmaFrag: 'React.Fragment'
   }];
-  const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
+  const plugins = configureJSX ? [...filteredBabelPlugins, jsxPlugin] : babelPlugins;
   return Object.assign({
     // don't use the root babelrc by default (users can override this in mdxBabelOptions)
     babelrc: false,
@@ -28,8 +36,7 @@ function createBabelOptions({
 }
 
 export async function webpack(webpackConfig = {}, options) {
-  const resolvedBabelLoader = require.resolve('babel-loader');
-
+  const resolvedBabelLoader = await options.presets.apply('babelLoaderRef');
   const {
     module = {}
   } = webpackConfig; // it will reuse babel options that are already in use in storybook
@@ -45,12 +52,14 @@ export 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, remarkExternalLinks]
   };
-  const mdxVersion = global.FEATURES?.previewMdx2 ? 'MDX2' : 'MDX1';
-  logger.info(`Addon-docs: using ${mdxVersion}`);
-  const mdxLoader = global.FEATURES?.previewMdx2 ? require.resolve('@storybook/mdx2-csf/loader') : require.resolve('@storybook/mdx1-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
+  logger.info(`Addon-docs: using MDX2`);
+
+  const mdxLoader = require.resolve('@storybook/mdx2-csf/loader'); // set `sourceLoaderOptions` to `null` to disable for manual configuration
+
 
   const sourceLoader = sourceLoaderOptions ? [{
     test: /\.(stories|story)\.[tj]sx?$/,
@@ -91,7 +100,10 @@ export async function webpack(webpackConfig = {}, options) {
             configureJSX
           })
         }, {
-          loader: mdxLoader
+          loader: mdxLoader,
+          options: Object.assign({}, mdxLoaderOptions, {
+            skipCsf: false
+          })
         }]
       }, {
         test: /\.mdx$/,
@@ -114,11 +126,11 @@ export async function webpack(webpackConfig = {}, options) {
 }
 export const storyIndexers = async indexers => {
   const mdxIndexer = async (fileName, opts) => {
-    let code = (await fs.readFile(fileName, 'utf-8')).toString(); // @ts-ignore
+    let code = (await fs.readFile(fileName, 'utf-8')).toString(); // @ts-expect-error (Converted from ts-ignore)
 
     const {
       compile
-    } = global.FEATURES?.previewMdx2 ? await import('@storybook/mdx2-csf') : await import('@storybook/mdx1-csf');
+    } = await import('@storybook/mdx2-csf');
     code = await compile(code, {});
     return loadCsf(code, Object.assign({}, opts, {
       fileName
@@ -127,6 +139,14 @@ export const storyIndexers = async indexers => {
 
   return [{
     test: /(stories|story)\.mdx$/,
-    indexer: mdxIndexer
+    indexer: mdxIndexer,
+    addDocsTemplate: true
   }, ...(indexers || [])];
+};
+export const docs = docsOptions => {
+  return Object.assign({}, docsOptions, {
+    enabled: true,
+    defaultName: 'Docs',
+    docsPage: true
+  });
 };

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

package/dist/types/DocsRenderer.d.ts

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

package/dist/types/blocks.d.ts

@@ -0,0 +1 @@
+export * from '@storybook/blocks';

package/dist/types/index.d.ts

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

package/dist/types/preset.d.ts

@@ -1,4 +1,4 @@
-import type { Options, StoryIndexer } from '@storybook/core-common';
+import type { DocsOptions, Options, StoryIndexer } from '@storybook/core-common';
 declare type BabelParams = {
     babelOptions?: any;
     mdxBabelOptions?: any;
@@ -8,5 +8,11 @@ export declare function webpack(webpackConfig: any, options: Options & BabelPara
     sourceLoaderOptions: any;
     transcludeMarkdown: boolean;
 }): Promise<any>;
-export declare const storyIndexers: (indexers?: StoryIndexer[]) => Promise<StoryIndexer[]>;
+export declare const storyIndexers: (indexers: StoryIndexer[] | null) => Promise<StoryIndexer[]>;
+export declare const docs: (docsOptions: DocsOptions) => {
+    enabled: boolean;
+    defaultName: string;
+    docsPage: boolean;
+    docsMode?: boolean;
+};
 export {};

package/dist/types/preview.d.ts

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

package/jest-transform-mdx.js

@@ -2,15 +2,16 @@ const path = require('path');
 const { ScriptTransformer } = require('@jest/transform');
 const { dedent } = require('ts-dedent');
 
-const { compileSync } = require('@storybook/mdx1-csf');
+const { compileAsync } = require('@storybook/mdx2-csf');
 
 module.exports = {
-  process(src, filename, config, { instrument }) {
+  async processAsync(src, filename, config, { instrument }) {
+    const code = await compileAsync(src, { skipCsf: false });
     const result = dedent`
       /* @jsx mdx */
       import React from 'react'
       import { mdx } from '@mdx-js/react'
-      ${compileSync(src, { filepath: filename })}
+      ${code}
     `;
 
     const extension = path.extname(filename);