diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 023f569c848..e6a8ce28b9a 100644 --- a/code/addons/docs/package.json +++ b/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" }, diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 3b7ac4a87a7..397f0172569 100644 --- a/code/addons/docs/src/preset.ts +++ b/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(); }; diff --git a/code/lib/core-server/src/typings.d.ts b/code/lib/core-server/src/typings.d.ts index b51124a22ab..2596c5e8940 100644 --- a/code/lib/core-server/src/typings.d.ts +++ b/code/lib/core-server/src/typings.d.ts @@ -15,5 +15,6 @@ declare var FEATURES: interactionsDebugger?: boolean; breakingChangesV7?: boolean; argTypeTargetsV7?: boolean; + legacyMdx1?: boolean; } | undefined; diff --git a/code/lib/preview-api/src/typings.d.ts b/code/lib/preview-api/src/typings.d.ts index 195827936c6..c55173e5bb9 100644 --- a/code/lib/preview-api/src/typings.d.ts +++ b/code/lib/preview-api/src/typings.d.ts @@ -13,6 +13,7 @@ declare var FEATURES: interactionsDebugger?: boolean; breakingChangesV7?: boolean; argTypeTargetsV7?: boolean; + legacyMdx1?: boolean; } | undefined; diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index d08b0282ce8..7089f5c5195 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/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; }; /** diff --git a/code/yarn.lock b/code/yarn.lock index 21739366642..43d3414345f 100644 --- a/code/yarn.lock +++ b/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