Vite: support legacyMdx1 fallback flag

MIGRATION.md

@@ -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)
@@ -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.

code/lib/builder-vite/package.json

@@ -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",
@@ -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": "*"
@@ -80,6 +82,9 @@
     "@preact/preset-vite": {
       "optional": true
     },
+    "@storybook/mdx1-csf": {
+      "optional": true
+    },
     "typescript": {
       "optional": true
     },

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

@@ -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 ?? {};
@@ -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: {