Addon-docs: Use jsxOptions instead of mdxBabelOptions

MIGRATION.md

@@ -45,6 +45,7 @@
     - [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components)
     - [Explicit `<code>` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted)
     - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
+    - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
   - [7.0 Deprecations](#70-deprecations)
@@ -912,6 +913,10 @@ module.exports = {
 };
 ```
 
+#### Dropped addon-docs manual babel configuration
+
+Addon-docs previously accepted `configureJsx` and `mdxBabelOptions` options, which allowed full customization of the babel options used to process markdown and mdx files. This has been simplified in 7.0, with a new option, `jsxOptions`, which can be used to customize the behavior of `@babel/preset-react`.
+
 #### Dropped addon-docs manual configuration
 
 Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely.

code/addons/docs/README.md

@@ -140,8 +140,7 @@ module.exports = {
     {
       name: '@storybook/addon-docs',
       options: {
-        configureJSX: true,
-        babelOptions: {},
+        jsxOptions: {},
         csfPluginOptions: null,
         transcludeMarkdown: true,
       },
@@ -150,7 +149,7 @@ module.exports = {
 };
 ```
 
-The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
+`jsxOptions` are options that will be passed to `@babel/preset-react` for `.md` and `.mdx` files.
 
 `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
 

code/addons/docs/postinstall/presets.js

@@ -24,9 +24,7 @@ export default function transformer(file, api) {
     ((dependencies && dependencies['react-scripts']) ||
       (devDependencies && devDependencies['react-scripts']))
   ) {
-    presetOptions = {
-      configureJSX: true,
-    };
+    presetOptions = {};
   }
 
   const j = api.jscodeshift;

code/addons/docs/src/preset.ts

@@ -5,26 +5,28 @@ import { dedent } from 'ts-dedent';
 
 import type { IndexerOptions, StoryIndexer, DocsOptions, Options } from '@storybook/types';
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
+import type { JSXOptions } from '@storybook/mdx2-csf';
 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
-// for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
-type BabelParams = {
-  mdxBabelOptions?: any;
-  /** @deprecated */
-  configureJSX?: boolean;
-};
-
 async function webpack(
   webpackConfig: any = {},
-  options: Options &
-    BabelParams & {
-      /** @deprecated */
-      sourceLoaderOptions: any;
-      csfPluginOptions: CsfPluginOptions | null;
-      transcludeMarkdown: boolean;
-    } /* & Parameters<
+  options: Options & {
+    /**
+     * @deprecated
+     * Use `jsxOptions` to customize options used by @babel/preset-react
+     */
+    configureJsx: boolean;
+    /**
+     * @deprecated
+     * Use `jsxOptions` to customize options used by @babel/preset-react
+     */
+    mdxBabelOptions?: any;
+    /** @deprecated */
+    sourceLoaderOptions: any;
+    csfPluginOptions: CsfPluginOptions | null;
+    transcludeMarkdown: boolean;
+    jsxOptions?: JSXOptions;
+  } /* & Parameters<
       typeof createCompiler
     >[0] */
 ) {
@@ -33,19 +35,21 @@ async function webpack(
   // it will reuse babel options that are already in use in storybook
   // also, these babel options are chained with other presets.
   const {
-    mdxBabelOptions,
     csfPluginOptions = {},
-    sourceLoaderOptions = null,
+    jsxOptions = {},
     transcludeMarkdown = false,
+    sourceLoaderOptions = null,
+    configureJsx,
+    mdxBabelOptions,
   } = options;
 
   const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
     skipCsf: true,
     mdxCompileOptions: {
       providerImportSource: '@storybook/addon-docs/mdx-react-shim',
-
       remarkPlugins: [remarkSlug, remarkExternalLinks],
     },
+    jsxOptions,
   });
 
   if (sourceLoaderOptions) {
@@ -58,6 +62,16 @@ async function webpack(
     `);
   }
 
+  if (mdxBabelOptions || configureJsx) {
+    throw new Error(dedent`
+      Addon-docs no longer uses configureJsx or mdxBabelOptions in 7.0.
+
+      To update your configuration, please see migration instructions here:
+
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-babel-configuration
+    `);
+  }
+
   const mdxLoader = require.resolve('@storybook/mdx2-csf/loader');
 
   let rules = module.rules || [];
@@ -95,7 +109,6 @@ async function webpack(
               loader: mdxLoader,
               options: {
                 ...mdxLoaderOptions,
-                mdxBabelOptions,
                 skipCsf: false,
               },
             },

code/lib/builder-vite/src/plugins/mdx-plugin.ts

@@ -1,4 +1,4 @@
-import type { Options } from '@storybook/types';
+import type { Options, StorybookConfig } from '@storybook/types';
 import type { Plugin } from 'vite';
 import { createFilter } from 'vite';
 
@@ -12,9 +12,13 @@ const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith
  *
  * @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
  */
-export function mdxPlugin(options: Options): Plugin {
+export async function mdxPlugin(options: Options): Promise<Plugin> {
   const include = /\.mdx?$/;
   const filter = createFilter(include);
+  const addons = await options.presets.apply<StorybookConfig['addons']>('addons', []);
+  const docsOptions =
+    // @ts-expect-error - not sure what type to use here
+    addons.find((a) => [a, a.name].includes('@storybook/addon-docs'))?.options ?? {};
 
   return {
     name: 'storybook:mdx-plugin',
@@ -28,6 +32,7 @@ export function mdxPlugin(options: Options): Plugin {
         mdxCompileOptions: {
           providerImportSource: '@storybook/addon-docs/mdx-react-shim',
         },
+        jsxOptions: docsOptions.jsxOptions,
       });
 
       const code = String(

code/yarn.lock

@@ -6772,11 +6772,9 @@ __metadata:
   linkType: soft
 
 "@storybook/mdx2-csf@npm:next":
-  version: 1.0.0-next.1
-  resolution: "@storybook/mdx2-csf@npm:1.0.0-next.1"
-  dependencies:
-    loader-utils: ^2.0.4
-  checksum: dc38ca9fb93b90308b6d6e1bbab4192c59ef7a7f02a1af50df29ca7d6445de7fce1e4be4ffb09ab98571303f0b022e027aa754039c35d038f584d7ac6039ca67
+  version: 1.0.0-next.2
+  resolution: "@storybook/mdx2-csf@npm:1.0.0-next.2"
+  checksum: ebf285ee9bb27912c7e3795ef2d155d555c0f7ade15fa38b2c9e15cd590143299b890663bb2e22438ba806aaba232ead1e025ba566540d6f86047c1c2b2b44ec
   languageName: node
   linkType: hard