Skip to content

Commit

Permalink
Vite: support legacyMdx1 fallback flag
Browse files Browse the repository at this point in the history
  • Loading branch information
IanVS committed Jan 30, 2023
1 parent f868839 commit 395e82d
Show file tree
Hide file tree
Showing 4 changed files with 511 additions and 23 deletions.
7 changes: 3 additions & 4 deletions MIGRATION.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [7.0 breaking changes](#70-breaking-changes)
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
- [Modern browser support](#modern-browser-support)
- [React peer dependencies required](#react-peer-dependencies-required)
Expand All @@ -23,7 +24,7 @@
- [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator)
- [Vite](#vite)
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Webpack](#webpack)
- [Webpack4 support discontinued](#webpack4-support-discontinued)
- [Postcss removed](#postcss-removed)
Expand Down Expand Up @@ -62,7 +63,7 @@
- [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)
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
- [`Story` type deprecated](#story-type-deprecated)
Expand Down Expand Up @@ -1044,8 +1045,6 @@ export default {

NOTE: This only affects `.(stories|story).mdx` files. Notably, if you want to use Storybook 7's "pure" `.mdx` format, you'll need to use MDX2 for that.

NOTE: Legacy MDX1 support is only for Webpack projects. There is currently no legacy support for Vite.

#### Default docs styles will leak into non-story user components

Storybook's default styles in docs are now globally applied to any element instead of using classes. This means that any component that you add directly in a docs file will also get the default styles.
Expand Down
5 changes: 5 additions & 0 deletions code/lib/builder-vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"slash": "^3.0.0"
},
"devDependencies": {
"@storybook/mdx1-csf": "next",
"@types/express": "^4.17.13",
"@types/node": "^16.0.0",
"rollup": "^3.0.0",
Expand All @@ -72,6 +73,7 @@
},
"peerDependencies": {
"@preact/preset-vite": "*",
"@storybook/mdx1-csf": "*",
"typescript": ">= 4.3.x",
"vite": "^3.0.0 || ^4.0.0",
"vite-plugin-glimmerx": "*"
Expand All @@ -80,6 +82,9 @@
"@preact/preset-vite": {
"optional": true
},
"@storybook/mdx1-csf": {
"optional": true
},
"typescript": {
"optional": true
},
Expand Down
7 changes: 5 additions & 2 deletions code/lib/builder-vite/src/plugins/mdx-plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith
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 { features, presets } = options;
const addons = await 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 ?? {};
Expand All @@ -26,7 +27,9 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
async transform(src, id) {
if (!filter(id)) return undefined;

const { compile } = await import('@storybook/mdx2-csf');
const { compile } = features?.legacyMdx1
? await import('@storybook/mdx1-csf')
: await import('@storybook/mdx2-csf');

const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
mdxCompileOptions: {
Expand Down
Loading

0 comments on commit 395e82d

Please sign in to comment.