Addon-docs: Add legacy transitional support for MDX1

code/addons/docs/package.json

@@ -126,9 +126,15 @@
     "typescript": "~4.9.3"
   },
   "peerDependencies": {
+    "@storybook/mdx1-csf": "0.0.5--canary.19.89e7fd1.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
+  "peerDependenciesMeta": {
+    "@storybook/mdx1-csf": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

code/addons/docs/src/preset.ts

@@ -6,7 +6,9 @@ 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 { global } from '@storybook/global';
 import { loadCsf } from '@storybook/csf-tools';
+import { logger } from '@storybook/node-logger';
 import { ensureReactPeerDeps } from './ensure-react-peer-deps';
 
 async function webpack(
@@ -73,7 +75,12 @@ async function webpack(
     `);
   }
 
-  const mdxLoader = require.resolve('@storybook/mdx2-csf/loader');
+  const mdxVersion = global.FEATURES?.legacyMdx1 ? 'MDX1' : 'MDX2';
+  logger.info(`Addon-docs: using ${mdxVersion}`);
+
+  const mdxLoader = global.FEATURES?.legacyMdx1
+    ? require.resolve('@storybook/mdx1-csf/loader')
+    : require.resolve('@storybook/mdx2-csf/loader');
 
   let rules = module.rules || [];
   if (transcludeMarkdown) {
@@ -135,7 +142,9 @@ async function webpack(
 const storyIndexers = (indexers: StoryIndexer[] | null) => {
   const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
     let code = (await fs.readFile(fileName, 'utf-8')).toString();
-    const { compile } = await import('@storybook/mdx2-csf');
+    const { compile } = global.FEATURES?.legacyMdx1
+      ? await import('@storybook/mdx1-csf')
+      : await import('@storybook/mdx2-csf');
     code = await compile(code, {});
     return loadCsf(code, { ...opts, fileName }).parse();
   };

code/lib/core-server/src/typings.d.ts

@@ -15,5 +15,6 @@ declare var FEATURES:
       interactionsDebugger?: boolean;
       breakingChangesV7?: boolean;
       argTypeTargetsV7?: boolean;
+      legacyMdx1?: boolean;
     }
   | undefined;

code/lib/preview-api/src/typings.d.ts

@@ -13,6 +13,7 @@ declare var FEATURES:
       interactionsDebugger?: boolean;
       breakingChangesV7?: boolean;
       argTypeTargetsV7?: boolean;
+      legacyMdx1?: boolean;
     }
   | undefined;
 

code/lib/types/src/modules/core-common.ts

@@ -317,6 +317,11 @@ export interface StorybookConfig {
      * Will be removed in 7.0.
      */
     warnOnLegacyHierarchySeparator?: boolean;
+
+    /**
+     * Use legacy MDX1, to help smooth migration to 7.0
+     */
+    legacyMdx1?: boolean;
   };
 
   /**

code/yarn.lock

@@ -5253,8 +5253,12 @@ __metadata:
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   peerDependencies:
+    "@storybook/mdx1-csf": 0.0.5--canary.19.e834b59.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@storybook/mdx1-csf":
+      optional: true
   languageName: unknown
   linkType: soft