diff --git a/MIGRATION.md b/MIGRATION.md index 914cd3a1b8ee..2d1cc59cd793 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -15,6 +15,7 @@ - [Stories glob matches MDX files](#stories-glob-matches-mdx-files) - [Add strict mode](#add-strict-mode) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) + - [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed) - [7.0 feature flags removed](#70-feature-flags-removed) - [Core addons](#core-addons) - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator) @@ -542,6 +543,21 @@ npx sb@next babelrc This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly. +#### Importing plain markdown files with `transcludeMarkdown` has changed + +The `transcludeMarkdown` option in `addon-docs` have been removed, and the automatic handling of `.md` files in Vite projects have also been disabled. + +Instead `.md` files can be imported as plain strings by adding the `?raw` suffix to the import. In an MDX file that would look like this: + +``` +import ReadMe from './README.md?raw'; + +... + +{ReadMe} + +``` + #### 7.0 feature flags removed Storybook uses temporary feature flags to opt-in to future breaking changes or opt-in to legacy behaviors. For example: diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 397f0172569e..b18dcc02bddc 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -27,7 +27,6 @@ async function webpack( /** @deprecated */ sourceLoaderOptions: any; csfPluginOptions: CsfPluginOptions | null; - transcludeMarkdown: boolean; jsxOptions?: JSXOptions; } /* & Parameters< typeof createCompiler @@ -40,7 +39,6 @@ async function webpack( const { csfPluginOptions = {}, jsxOptions = {}, - transcludeMarkdown = false, sourceLoaderOptions = null, configureJsx, mdxBabelOptions, @@ -82,22 +80,6 @@ async function webpack( ? require.resolve('@storybook/mdx1-csf/loader') : require.resolve('@storybook/mdx2-csf/loader'); - let rules = module.rules || []; - if (transcludeMarkdown) { - rules = [ - ...rules.filter((rule: any) => rule.test?.toString() !== '/\\.md$/'), - { - test: /\.md$/, - use: [ - { - loader: mdxLoader, - options: mdxLoaderOptions, - }, - ], - }, - ]; - } - const result = { ...webpackConfig, plugins: [ @@ -109,7 +91,7 @@ async function webpack( module: { ...module, rules: [ - ...rules, + ...module.rules, { test: /(stories|story)\.mdx$/, use: [ diff --git a/code/lib/builder-vite/src/plugins/mdx-plugin.ts b/code/lib/builder-vite/src/plugins/mdx-plugin.ts index deedf25fa822..cc99399010d2 100644 --- a/code/lib/builder-vite/src/plugins/mdx-plugin.ts +++ b/code/lib/builder-vite/src/plugins/mdx-plugin.ts @@ -13,7 +13,7 @@ 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 async function mdxPlugin(options: Options): Promise { - const include = /\.mdx?$/; + const include = /\.mdx$/; const filter = createFilter(include); const addons = await options.presets.apply('addons', []); const docsOptions = diff --git a/code/lib/builder-webpack5/src/preview/base-webpack.config.ts b/code/lib/builder-webpack5/src/preview/base-webpack.config.ts index 62ba0d8ed50b..8a2d60743661 100644 --- a/code/lib/builder-webpack5/src/preview/base-webpack.config.ts +++ b/code/lib/builder-webpack5/src/preview/base-webpack.config.ts @@ -74,6 +74,13 @@ export async function createDefaultWebpackConfig( : 'static/media/[path][name][ext]', }, }, + { + // any imports from './some-file.md?raw' will be imported as raw string + // see https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax + // used to support import raw .md files in MDX + resourceQuery: /raw/, + type: 'asset/source', + }, ], }, resolve: { diff --git a/code/lib/core-server/src/__for-testing__/main.ts b/code/lib/core-server/src/__for-testing__/main.ts index 883637275c82..5eaf65a45fa9 100644 --- a/code/lib/core-server/src/__for-testing__/main.ts +++ b/code/lib/core-server/src/__for-testing__/main.ts @@ -14,7 +14,6 @@ const config: StorybookConfig = { { name: '@storybook/addon-docs', options: { - transcludeMarkdown: true, sourceLoaderOptions: null, }, },