Merge pull request #17515 from storybookjs/17514-mdx2-support

Addon-docs: MDX2 support

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
+  - [Opt-in MDX2 support](#opt-in-mdx2-support)
   - [CSF3 auto-title redundant filename](#csf3-auto-title-redundant-filename)
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
   - [Automigrate](#automigrate)
@@ -192,6 +193,24 @@
 
 ## From version 6.4.x to 6.5.0
 
+### Opt-in MDX2 support
+
+SB6.5 adds experimental opt-in support for MDXv2. To install:
+
+```sh
+yarn add @storybook/mdx2-csf -D
+```
+
+Then add the `previewMdx2` feature flag to your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  features: {
+    previewMdx2: true,
+  },
+};
+```
+
 ### CSF3 auto-title redundant filename
 
 SB 6.4 introduced experimental "auto-title", in which a story's location in the sidebar (aka `title`) can be automatically inferred from its location on disk. For example, the file `atoms/Button.stories.js` might result in the title `Atoms/Button`.

addons/docs/jest-transform-mdx.js

@@ -1,19 +1,16 @@
 const path = require('path');
-const mdx = require('@mdx-js/mdx');
 const { ScriptTransformer } = require('@jest/transform');
 const { dedent } = require('ts-dedent');
 
-const { createCompiler } = require('@storybook/csf-tools/mdx');
-
-const compilers = [createCompiler({})];
+const { compileSync } = require('@storybook/mdx1-csf');
 
 module.exports = {
   process(src, filename, config, { instrument }) {
     const result = dedent`
       /* @jsx mdx */
       import React from 'react'
       import { mdx } from '@mdx-js/react'
-      ${mdx.sync(src, { compilers, filepath: filename })}
+      ${compileSync(src, { filepath: filename })}
     `;
 
     const extension = path.extname(filename);

addons/docs/mdx-compiler-plugin.js

@@ -1 +1 @@
-module.exports = require('@storybook/csf-tools/mdx').createCompiler;
+module.exports = require('@storybook/mdx1-csf').createCompiler;

addons/docs/package.json

@@ -61,8 +61,6 @@
     "@babel/plugin-transform-react-jsx": "^7.12.12",
     "@babel/preset-env": "^7.12.11",
     "@jest/transform": "^26.6.2",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addons": "6.5.0-alpha.42",
     "@storybook/api": "6.5.0-alpha.42",
@@ -73,6 +71,7 @@
     "@storybook/core-events": "6.5.0-alpha.42",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "@storybook/csf-tools": "6.5.0-alpha.42",
+    "@storybook/mdx1-csf": "0.0.1-canary.1.0025c94.0",
     "@storybook/node-logger": "6.5.0-alpha.42",
     "@storybook/postinstall": "6.5.0-alpha.42",
     "@storybook/preview-web": "6.5.0-alpha.42",
@@ -88,7 +87,6 @@
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "html-tags": "^3.1.0",
-    "js-string-escape": "^1.0.1",
     "loader-utils": "^2.0.0",
     "lodash": "^4.17.21",
     "nanoid": "^3.1.23",
@@ -109,22 +107,20 @@
     "@emotion/styled": "^10.0.27",
     "@storybook/angular": "6.5.0-alpha.42",
     "@storybook/html": "6.5.0-alpha.42",
+    "@storybook/mdx2-csf": "0.0.1-canary.1.357011b.0",
     "@storybook/react": "6.5.0-alpha.42",
     "@storybook/vue": "6.5.0-alpha.42",
     "@storybook/web-components": "6.5.0-alpha.42",
     "@types/cross-spawn": "^6.0.2",
     "@types/doctrine": "^0.0.3",
-    "@types/enzyme": "^3.10.8",
     "@types/estree": "^0.0.44",
-    "@types/jest": "^26.0.16",
     "@types/loader-utils": "^2.0.0",
     "@types/prop-types": "^15.7.3",
     "@types/tmp": "^0.2.0",
     "@types/util-deprecate": "^1.0.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-react-docgen": "^4.2.1",
     "cross-spawn": "^7.0.3",
-    "fs-extra": "^9.0.1",
     "jest": "^26.6.3",
     "jest-specific-snapshot": "^4.0.0",
     "lit-element": "^3.0.2",
@@ -134,12 +130,27 @@
     "styled-components": "^5.2.1",
     "sveltedoc-parser": "4.1.0",
     "tmp": "^0.2.1",
-    "tslib": "^2.1.0",
     "vue": "^2.6.10",
-    "web-component-analyzer": "^1.1.6",
     "webpack": "4",
     "zone.js": "^0.11.3"
   },
+  "peerDependencies": {
+    "@storybook/angular": "6.5.0-alpha.42",
+    "@storybook/html": "6.5.0-alpha.42",
+    "@storybook/mdx2-csf": "0.0.1-canary.1.357011b.0",
+    "@storybook/react": "6.5.0-alpha.42",
+    "@storybook/vue": "6.5.0-alpha.42",
+    "@storybook/vue3": "6.5.0-alpha.42",
+    "@storybook/web-components": "6.5.0-alpha.42",
+    "lit": "^2.0.0",
+    "lit-html": "^1.4.1 || ^2.0.0",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "svelte": "^3.31.2",
+    "sveltedoc-parser": "^4.1.0",
+    "vue": "^2.6.10 || ^3.0.0",
+    "webpack": "*"
+  },
   "peerDependenciesMeta": {
     "@storybook/angular": {
       "optional": true
@@ -159,6 +170,9 @@
     "@storybook/manager-webpack5": {
       "optional": true
     },
+    "@storybook/mdx2-csf": {
+      "optional": true
+    },
     "@storybook/react": {
       "optional": true
     },

addons/docs/src/frameworks/common/preset.ts

@@ -1,11 +1,12 @@
 import path from 'path';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
+import global from 'global';
 
-// @ts-ignore
-import { createCompiler } from '@storybook/csf-tools/mdx';
 import type { BuilderConfig, Options } from '@storybook/core-common';
 
+const { log } = console;
+
 // 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
 // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
@@ -34,9 +35,9 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab
 export async function webpack(
   webpackConfig: any = {},
   options: Options &
-    BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } & Parameters<
+    BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } /* & Parameters<
       typeof createCompiler
-    >[0]
+    >[0] */
 ) {
   const { builder = 'webpack4' } = await options.presets.apply<{
     builder: BuilderConfig;
@@ -62,9 +63,17 @@ export async function webpack(
   } = options;
 
   const mdxLoaderOptions = {
+    skipCsf: true,
     remarkPlugins: [remarkSlug, remarkExternalLinks],
   };
 
+  const mdxVersion = global.FEATURES?.previewMdx2 ? 'MDX2' : 'MDX1';
+  log(`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
   const sourceLoader = sourceLoaderOptions
     ? [
@@ -89,7 +98,7 @@ export async function webpack(
             options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
           },
           {
-            loader: require.resolve('@mdx-js/loader'),
+            loader: mdxLoader,
             options: mdxLoaderOptions,
           },
         ],
@@ -123,11 +132,7 @@ export async function webpack(
               options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
             },
             {
-              loader: require.resolve('@mdx-js/loader'),
-              options: {
-                compilers: [createCompiler(options)],
-                ...mdxLoaderOptions,
-              },
+              loader: mdxLoader,
             },
           ],
         },
@@ -140,7 +145,7 @@ export async function webpack(
               options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
             },
             {
-              loader: require.resolve('@mdx-js/loader'),
+              loader: mdxLoader,
               options: mdxLoaderOptions,
             },
           ],

examples/react-ts/.storybook/main.ts

@@ -32,6 +32,7 @@ const config: StorybookConfig = {
     buildStoriesJson: true,
     babelModeV7: true,
     warnOnLegacyHierarchySeparator: false,
+    previewMdx2: true,
   },
   framework: '@storybook/react',
 };

examples/react-ts/src/__snapshots__/storyshots.test.ts.snap

@@ -3404,15 +3404,15 @@ exports[`Storyshots Demo/Account Form Verification Success 1`] = `
 </section>
 `;
 
-exports[`Storyshots Docs/Button Basic 1`] = `
+exports[`Storyshots Docs/ButtonMdx Basic 1`] = `
 <button
   type="button"
 >
   Click me
 </button>
 `;
 
-exports[`Storyshots Docs/Button Controls 1`] = `
+exports[`Storyshots Docs/ButtonMdx Controls 1`] = `
 <button
   type="button"
 >

examples/react-ts/src/addon-docs/docs-only.stories.mdx

@@ -6,4 +6,4 @@ import { Meta, Canvas } from '@storybook/addon-docs';
 
 ## [Link](http://https://storybook.js.org/) in heading
 
-This file is a documentation-only MDX file, i.e. it doesn't contain any `<Story>` definitions.
+This file is a documentation-only MDX {1+1} file, i.e. it doesn't contain any `<Story>` definitions.

examples/react-ts/src/addon-docs/docs.stories.mdx

@@ -1,9 +1,9 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import { Button } from '../button';
 
-<Meta title="Docs/Button" component={Button} />
+<Meta title="Docs/ButtonMdx" component={Button} />
 
-# Button
+# Button MDX
 
 <Story name="Basic">
   <Button label="Click me" />

lib/cli/src/versions.ts

@@ -1,58 +1,58 @@
 // auto generated file, do not edit
 export default {
-  "@storybook/addon-a11y": "6.5.0-alpha.42",
-  "@storybook/addon-actions": "6.5.0-alpha.42",
-  "@storybook/addon-backgrounds": "6.5.0-alpha.42",
-  "@storybook/addon-controls": "6.5.0-alpha.42",
-  "@storybook/addon-docs": "6.5.0-alpha.42",
-  "@storybook/addon-essentials": "6.5.0-alpha.42",
-  "@storybook/addon-interactions": "6.5.0-alpha.42",
-  "@storybook/addon-jest": "6.5.0-alpha.42",
-  "@storybook/addon-links": "6.5.0-alpha.42",
-  "@storybook/addon-measure": "6.5.0-alpha.42",
-  "@storybook/addon-outline": "6.5.0-alpha.42",
-  "@storybook/addon-storyshots": "6.5.0-alpha.42",
-  "@storybook/addon-storyshots-puppeteer": "6.5.0-alpha.42",
-  "@storybook/addon-storysource": "6.5.0-alpha.42",
-  "@storybook/addon-toolbars": "6.5.0-alpha.42",
-  "@storybook/addon-viewport": "6.5.0-alpha.42",
-  "@storybook/addons": "6.5.0-alpha.42",
-  "@storybook/angular": "6.5.0-alpha.42",
-  "@storybook/api": "6.5.0-alpha.42",
-  "@storybook/builder-webpack4": "6.5.0-alpha.42",
-  "@storybook/builder-webpack5": "6.5.0-alpha.42",
-  "@storybook/channel-postmessage": "6.5.0-alpha.42",
-  "@storybook/channel-websocket": "6.5.0-alpha.42",
-  "@storybook/channels": "6.5.0-alpha.42",
-  "@storybook/cli": "6.5.0-alpha.42",
-  "@storybook/client-api": "6.5.0-alpha.42",
-  "@storybook/client-logger": "6.5.0-alpha.42",
-  "@storybook/codemod": "6.5.0-alpha.42",
-  "@storybook/components": "6.5.0-alpha.42",
-  "@storybook/core": "6.5.0-alpha.42",
-  "@storybook/core-client": "6.5.0-alpha.42",
-  "@storybook/core-common": "6.5.0-alpha.42",
-  "@storybook/core-events": "6.5.0-alpha.42",
-  "@storybook/core-server": "6.5.0-alpha.42",
-  "@storybook/csf-tools": "6.5.0-alpha.42",
-  "@storybook/ember": "6.5.0-alpha.42",
-  "@storybook/html": "6.5.0-alpha.42",
-  "@storybook/instrumenter": "6.5.0-alpha.42",
-  "@storybook/manager-webpack4": "6.5.0-alpha.42",
-  "@storybook/manager-webpack5": "6.5.0-alpha.42",
-  "@storybook/node-logger": "6.5.0-alpha.42",
-  "@storybook/postinstall": "6.5.0-alpha.42",
-  "@storybook/preact": "6.5.0-alpha.42",
-  "@storybook/preview-web": "6.5.0-alpha.42",
-  "@storybook/react": "6.5.0-alpha.42",
-  "@storybook/router": "6.5.0-alpha.42",
-  "@storybook/server": "6.5.0-alpha.42",
-  "@storybook/source-loader": "6.5.0-alpha.42",
-  "@storybook/store": "6.5.0-alpha.42",
-  "@storybook/svelte": "6.5.0-alpha.42",
-  "@storybook/theming": "6.5.0-alpha.42",
-  "@storybook/ui": "6.5.0-alpha.42",
-  "@storybook/vue": "6.5.0-alpha.42",
-  "@storybook/vue3": "6.5.0-alpha.42",
-  "@storybook/web-components": "6.5.0-alpha.42"
-}
+  '@storybook/addon-a11y': '6.5.0-alpha.42',
+  '@storybook/addon-actions': '6.5.0-alpha.42',
+  '@storybook/addon-backgrounds': '6.5.0-alpha.42',
+  '@storybook/addon-controls': '6.5.0-alpha.42',
+  '@storybook/addon-docs': '6.5.0-alpha.42',
+  '@storybook/addon-essentials': '6.5.0-alpha.42',
+  '@storybook/addon-interactions': '6.5.0-alpha.42',
+  '@storybook/addon-jest': '6.5.0-alpha.42',
+  '@storybook/addon-links': '6.5.0-alpha.42',
+  '@storybook/addon-measure': '6.5.0-alpha.42',
+  '@storybook/addon-outline': '6.5.0-alpha.42',
+  '@storybook/addon-storyshots': '6.5.0-alpha.42',
+  '@storybook/addon-storyshots-puppeteer': '6.5.0-alpha.42',
+  '@storybook/addon-storysource': '6.5.0-alpha.42',
+  '@storybook/addon-toolbars': '6.5.0-alpha.42',
+  '@storybook/addon-viewport': '6.5.0-alpha.42',
+  '@storybook/addons': '6.5.0-alpha.42',
+  '@storybook/angular': '6.5.0-alpha.42',
+  '@storybook/api': '6.5.0-alpha.42',
+  '@storybook/builder-webpack4': '6.5.0-alpha.42',
+  '@storybook/builder-webpack5': '6.5.0-alpha.42',
+  '@storybook/channel-postmessage': '6.5.0-alpha.42',
+  '@storybook/channel-websocket': '6.5.0-alpha.42',
+  '@storybook/channels': '6.5.0-alpha.42',
+  '@storybook/cli': '6.5.0-alpha.42',
+  '@storybook/client-api': '6.5.0-alpha.42',
+  '@storybook/client-logger': '6.5.0-alpha.42',
+  '@storybook/codemod': '6.5.0-alpha.42',
+  '@storybook/components': '6.5.0-alpha.42',
+  '@storybook/core': '6.5.0-alpha.42',
+  '@storybook/core-client': '6.5.0-alpha.42',
+  '@storybook/core-common': '6.5.0-alpha.42',
+  '@storybook/core-events': '6.5.0-alpha.42',
+  '@storybook/core-server': '6.5.0-alpha.42',
+  '@storybook/csf-tools': '6.5.0-alpha.42',
+  '@storybook/ember': '6.5.0-alpha.42',
+  '@storybook/html': '6.5.0-alpha.42',
+  '@storybook/instrumenter': '6.5.0-alpha.42',
+  '@storybook/manager-webpack4': '6.5.0-alpha.42',
+  '@storybook/manager-webpack5': '6.5.0-alpha.42',
+  '@storybook/node-logger': '6.5.0-alpha.42',
+  '@storybook/postinstall': '6.5.0-alpha.42',
+  '@storybook/preact': '6.5.0-alpha.42',
+  '@storybook/preview-web': '6.5.0-alpha.42',
+  '@storybook/react': '6.5.0-alpha.42',
+  '@storybook/router': '6.5.0-alpha.42',
+  '@storybook/server': '6.5.0-alpha.42',
+  '@storybook/source-loader': '6.5.0-alpha.42',
+  '@storybook/store': '6.5.0-alpha.42',
+  '@storybook/svelte': '6.5.0-alpha.42',
+  '@storybook/theming': '6.5.0-alpha.42',
+  '@storybook/ui': '6.5.0-alpha.42',
+  '@storybook/vue': '6.5.0-alpha.42',
+  '@storybook/vue3': '6.5.0-alpha.42',
+  '@storybook/web-components': '6.5.0-alpha.42',
+};

lib/core-common/src/types.ts

@@ -373,6 +373,11 @@ export interface StorybookConfig {
      * Will be removed in 7.0.
      */
     warnOnLegacyHierarchySeparator?: boolean;
+
+    /**
+     * Preview MDX2 support, will become default in 7.0
+     */
+    previewMdx2?: boolean;
   };
 
   /**