@storybook/addon-docs 7.0.0-alpha.39 → 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)
 
@@ -166,67 +165,6 @@ 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/code/addons/docs/docs/props-tables.md).

package/dist/cjs/DocsRenderer.js

@@ -33,8 +33,10 @@ class DocsRenderer {
       // 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: defaultComponents
+        components: components
       }, /*#__PURE__*/_react.default.createElement(_blocks.Docs, {
         key: Math.random(),
         context: context,

package/dist/cjs/preset.js

@@ -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");
@@ -54,8 +52,6 @@ function createBabelOptions({
 }
 
 async function webpack(webpackConfig = {}, options) {
-  var _global$FEATURES, _global$FEATURES2;
-
   const resolvedBabelLoader = await options.presets.apply('babelLoaderRef');
   const {
     module = {}
@@ -76,11 +72,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';
 
-  _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?$/,
@@ -152,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-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

package/dist/esm/DocsRenderer.js

@@ -17,8 +17,9 @@ export class DocsRenderer {
       // 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: defaultComponents
+        components: components
       }, /*#__PURE__*/React.createElement(Docs, {
         key: Math.random(),
         context: context,

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
@@ -57,9 +56,10 @@ export async function webpack(webpackConfig = {}, options) {
     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?$/,
@@ -130,7 +130,7 @@ export const storyIndexers = async indexers => {
 
     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

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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.39",
+  "version": "7.0.0-alpha.40",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -51,23 +51,23 @@
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.12.12",
     "@jest/transform": "^26.6.2",
-    "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "7.0.0-alpha.39",
-    "@storybook/api": "7.0.0-alpha.39",
-    "@storybook/blocks": "7.0.0-alpha.39",
-    "@storybook/components": "7.0.0-alpha.39",
-    "@storybook/core-common": "7.0.0-alpha.39",
-    "@storybook/core-events": "7.0.0-alpha.39",
+    "@mdx-js/react": "^2.1.5",
+    "@storybook/addons": "7.0.0-alpha.40",
+    "@storybook/api": "7.0.0-alpha.40",
+    "@storybook/blocks": "7.0.0-alpha.40",
+    "@storybook/components": "7.0.0-alpha.40",
+    "@storybook/core-common": "7.0.0-alpha.40",
+    "@storybook/core-events": "7.0.0-alpha.40",
     "@storybook/csf": "0.0.2--canary.49.258942b.0",
-    "@storybook/csf-tools": "7.0.0-alpha.39",
-    "@storybook/docs-tools": "7.0.0-alpha.39",
-    "@storybook/mdx1-csf": "0.0.5-canary.13.9ce928a.0",
-    "@storybook/node-logger": "7.0.0-alpha.39",
-    "@storybook/postinstall": "7.0.0-alpha.39",
-    "@storybook/preview-web": "7.0.0-alpha.39",
-    "@storybook/source-loader": "7.0.0-alpha.39",
-    "@storybook/store": "7.0.0-alpha.39",
-    "@storybook/theming": "7.0.0-alpha.39",
+    "@storybook/csf-tools": "7.0.0-alpha.40",
+    "@storybook/docs-tools": "7.0.0-alpha.40",
+    "@storybook/mdx2-csf": "0.1.0-next.0",
+    "@storybook/node-logger": "7.0.0-alpha.40",
+    "@storybook/postinstall": "7.0.0-alpha.40",
+    "@storybook/preview-web": "7.0.0-alpha.40",
+    "@storybook/source-loader": "7.0.0-alpha.40",
+    "@storybook/store": "7.0.0-alpha.40",
+    "@storybook/theming": "7.0.0-alpha.40",
     "dequal": "^2.0.2",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",
@@ -77,18 +77,13 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/mdx2-csf": "0.0.4-canary.14.04ffbe8.0",
     "typescript": "~4.6.3"
   },
   "peerDependencies": {
-    "@storybook/mdx2-csf": "0.0.4-canary.14.04ffbe8.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
-    "@storybook/mdx2-csf": {
-      "optional": true
-    },
     "react": {
       "optional": true
     },
@@ -99,7 +94,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "47386bd49d141ea70daac41ab3e4d52749fc5da9",
+  "gitHead": "8f6d8629f1ad7e776c39e2c7621f4a0d538aa93c",
   "storybook": {
     "displayName": "Docs",
     "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",