Merge pull request #20823 from storybookjs/vite/mdx1

Vite: Support legacyMdx1 fallback flag

MIGRATION.md

@@ -19,6 +19,7 @@
     - [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)
+    - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
   - [Core addons](#core-addons)
     - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
     - [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter)
@@ -282,12 +283,6 @@ A number of these changes can be made automatically by the Storybook CLI. To tak
 
 ### 7.0 breaking changes
 
-#### Story context is prepared before for supporting fine grained updates
-
-This change modifies the way Storybook prepares stories to avoid reactive args to get lost for fine-grained updates JS frameworks as `SolidJS` or `Vue`. That's because those frameworks handle args/props as proxies behind the scenes to make reactivity work. So when `argType` mapping was done in `prepareStory` the Proxies were destroyed and args becomes a plain object again, losing the reactivity.
-
-For avoiding that, this change passes the mapped args instead of raw args at `renderToCanvas` so that the proxies stay intact. Also decorators will benefit from this as well by receiving mapped args instead of raw args.
-
 #### Dropped support for Node 15 and below
 
 Storybook 7.0 requires **Node 16** or above. If you are using an older version of Node, you will need to upgrade or keep using Storybook 6 in the meantime.
@@ -629,6 +624,12 @@ In 7.0 we've removed the following feature flags:
 | `breakingChangesV7` | This flag is no longer needed and should be deleted.        |
 | `babelModeV7`       | See [Babel mode v7 exclusively](#babel-mode-v7-exclusively) |
 
+#### Story context is prepared before for supporting fine grained updates
+
+This change modifies the way Storybook prepares stories to avoid reactive args to get lost for fine-grained updates JS frameworks as `SolidJS` or `Vue`. That's because those frameworks handle args/props as proxies behind the scenes to make reactivity work. So when `argType` mapping was done in `prepareStory` the Proxies were destroyed and args becomes a plain object again, losing the reactivity.
+
+For avoiding that, this change passes the mapped args instead of raw args at `renderToCanvas` so that the proxies stay intact. Also decorators will benefit from this as well by receiving mapped args instead of raw args.
+
 ### Core addons
 
 #### Removed auto injection of @storybook/addon-actions decorator
@@ -1088,8 +1089,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,18 +15,18 @@ 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 { mdxPluginOptions, jsxOptions } = await options.presets.apply<Record<string, any>>(
-    'options',
-    {}
-  );
+  const { features, presets } = options;
+  const { mdxPluginOptions, jsxOptions } = await presets.apply<Record<string, any>>('options', {});
 
   return {
     name: 'storybook:mdx-plugin',
     enforce: 'pre',
     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', {
         ...mdxPluginOptions,