Merge pull request #2701 from modernweb-dev/feat/storybook-builder-mdx

feat(storybook-builder): support MDX and autodocs

.changeset/eighty-chicken-sort.md

@@ -0,0 +1,5 @@
+---
+'@web/storybook-builder': patch
+---
+
+support MDX and autodocs

packages/storybook-builder/package.json

@@ -50,6 +50,7 @@
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/core-common": "^7.0.0",
+    "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/node-logger": "^7.0.0",
     "@storybook/preview": "^7.0.0",
     "@web/dev-server": "^0.4.0",
@@ -65,6 +66,8 @@
     "glob-promise": "^6.0.3",
     "lodash-es": "^4.17.21",
     "path-browserify": "^1.0.1",
+    "remark-external-links": "^8.0.0",
+    "remark-slug": "^6.0.0",
     "rollup": "^4.4.1",
     "rollup-plugin-external-globals": "^0.9.0",
     "slash": "^5.1.0"

packages/storybook-builder/src/generate-stories-script.ts

@@ -33,7 +33,13 @@ async function toImportFn(stories: string[]) {
       logger.warn(`Cannot process ${ext} file with storyStoreV7: ${relativePath}`);
     }
 
-    return `  '${toImportPath(relativePath)}': () => import('${process.cwd()}/${relativePath}')`;
+    const importPath = toImportPath(relativePath);
+    let actualPath = `${process.cwd()}/${relativePath}`;
+    if (actualPath.endsWith('.mdx')) {
+      actualPath = `${actualPath}.js`;
+    }
+
+    return `  '${importPath}': () => import('${actualPath}')`;
   });
 
   return `

packages/storybook-builder/src/index.ts

@@ -17,13 +17,15 @@ import rollupPluginExternalGlobals from 'rollup-plugin-external-globals';
 import { generateIframeHtml } from './generate-iframe-html.js';
 import { getNodeModuleDir } from './get-node-module-dir.js';
 import { readFileConfig } from './read-file-config.js';
+import { rollupPluginMdx } from './rollup-plugin-mdx.js';
 import {
   PREBUNDLED_MODULES_DIR,
   rollupPluginPrebundleModules,
 } from './rollup-plugin-prebundle-modules.js';
 import { rollupPluginStorybookBuilder } from './rollup-plugin-storybook-builder.js';
 
 const wdsPluginExternalGlobals = fromRollup(rollupPluginExternalGlobals);
+const wdsPluginMdx = fromRollup(rollupPluginMdx);
 const wdsPluginPrebundleModules = fromRollup(rollupPluginPrebundleModules);
 const wdsPluginStorybookBuilder = fromRollup(rollupPluginStorybookBuilder);
 
@@ -76,6 +78,7 @@ export const start: WdsBuilder['start'] = async ({ startTime, options, router, s
       },
       wdsPluginPrebundleModules(env),
       wdsPluginStorybookBuilder(options),
+      wdsPluginMdx(options),
       wdsPluginExternalGlobals(globalsNameReferenceMap || globals),
     ],
   };
@@ -149,6 +152,7 @@ export const build: WdsBuilder['build'] = async ({ startTime, options }) => {
       rollupPluginNodeResolve(),
       rollupPluginPrebundleModules(env),
       rollupPluginStorybookBuilder(options),
+      rollupPluginMdx(options),
       rollupPluginExternalGlobals(globalsNameReferenceMap || globals),
     ],
   };

packages/storybook-builder/src/rollup-plugin-mdx.ts

@@ -0,0 +1,54 @@
+import { compile } from '@storybook/mdx2-csf';
+import type { Options } from '@storybook/types';
+import { readFile } from 'fs-extra';
+import remarkExternalLinks from 'remark-external-links';
+import remarkSlug from 'remark-slug';
+import type { Plugin } from 'rollup';
+
+export function rollupPluginMdx(storybookOptions: Options): Plugin {
+  let mdxPluginOptions: Record<string, any>;
+  let jsxOptions: Record<string, any>;
+
+  return {
+    name: 'rollup-plugin-mdx',
+
+    async buildStart() {
+      ({ mdxPluginOptions, jsxOptions } = await storybookOptions.presets.apply<Record<string, any>>(
+        'options',
+        {},
+      ));
+    },
+
+    async resolveId(id) {
+      if (id.endsWith('.mdx.js')) {
+        return id;
+      }
+    },
+
+    async load(id) {
+      if (!id.endsWith('.mdx.js')) return;
+
+      const mdxPath = id.replace(/\.js$/, '');
+      const mdxCode = await readFile(mdxPath, 'utf8');
+
+      const mdxLoaderOptions = await storybookOptions.presets.apply('mdxLoaderOptions', {
+        ...mdxPluginOptions,
+        mdxCompileOptions: {
+          providerImportSource: '@mdx-js/react',
+          ...mdxPluginOptions?.mdxCompileOptions,
+          remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
+            mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? [],
+          ),
+        },
+        jsxOptions,
+      });
+
+      const jsCode = compile(mdxCode, {
+        skipCsf: true,
+        ...mdxLoaderOptions,
+      });
+
+      return jsCode;
+    },
+  };
+}

packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts

@@ -78,6 +78,12 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
 // builder-vite bundles different dependencies for performance reasons
 // we aim only at browserifying NodeJS dependencies (CommonJS/process.env/...)
 export const CANDIDATES = [
+  /* for different addons built with React and for MDX */
+  '@storybook/react-dom-shim', // needs special resolution
+  'react',
+  process.env.NODE_ENV === 'production' ? 'react/jsx-runtime' : 'react/jsx-dev-runtime',
+  'react-dom',
+
   /* for different packages */
   'tiny-invariant',
 
@@ -92,7 +98,6 @@ export const CANDIDATES = [
   '@testing-library/user-event',
 
   /* for @storybook/addon-docs */
-  '@storybook/react-dom-shim', // needs special resolution
   'color-convert',
   'doctrine',
   'lodash/cloneDeep.js',
@@ -101,8 +106,6 @@ export const CANDIDATES = [
   'lodash/throttle.js',
   'lodash/uniq.js',
   'memoizerific',
-  'react',
-  'react-dom',
   'tocbot',
 
   /* for @storybook/addon-a11y */

packages/storybook-framework-web-components/package.json

@@ -69,6 +69,7 @@
     "@storybook/addon-essentials": "^7.0.0",
     "@storybook/addon-interactions": "^7.0.0",
     "@storybook/addon-links": "^7.0.0",
+    "@storybook/blocks": "^7.0.0",
     "@storybook/types": "^7.0.0",
     "@web/dev-server": "^0.4.0",
     "storybook": "^7.0.0"