Skip to content

Commit e257d08

Browse files
authored
Merge pull request #2701 from modernweb-dev/feat/storybook-builder-mdx
feat(storybook-builder): support MDX and autodocs
2 parents 3032b41 + e30da4a commit e257d08

16 files changed

+265
-113
lines changed

.changeset/eighty-chicken-sort.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@web/storybook-builder': patch
3+
---
4+
5+
support MDX and autodocs

package-lock.json

+6-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/storybook-builder/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"@rollup/plugin-node-resolve": "^15.1.0",
5151
"@rollup/pluginutils": "^5.0.2",
5252
"@storybook/core-common": "^7.0.0",
53+
"@storybook/mdx2-csf": "^1.0.0",
5354
"@storybook/node-logger": "^7.0.0",
5455
"@storybook/preview": "^7.0.0",
5556
"@web/dev-server": "^0.4.0",
@@ -65,6 +66,8 @@
6566
"glob-promise": "^6.0.3",
6667
"lodash-es": "^4.17.21",
6768
"path-browserify": "^1.0.1",
69+
"remark-external-links": "^8.0.0",
70+
"remark-slug": "^6.0.0",
6871
"rollup": "^4.4.1",
6972
"rollup-plugin-external-globals": "^0.9.0",
7073
"slash": "^5.1.0"

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,13 @@ async function toImportFn(stories: string[]) {
3333
logger.warn(`Cannot process ${ext} file with storyStoreV7: ${relativePath}`);
3434
}
3535

36-
return ` '${toImportPath(relativePath)}': () => import('${process.cwd()}/${relativePath}')`;
36+
const importPath = toImportPath(relativePath);
37+
let actualPath = `${process.cwd()}/${relativePath}`;
38+
if (actualPath.endsWith('.mdx')) {
39+
actualPath = `${actualPath}.js`;
40+
}
41+
42+
return ` '${importPath}': () => import('${actualPath}')`;
3743
});
3844

3945
return `

packages/storybook-builder/src/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@ import rollupPluginExternalGlobals from 'rollup-plugin-external-globals';
1717
import { generateIframeHtml } from './generate-iframe-html.js';
1818
import { getNodeModuleDir } from './get-node-module-dir.js';
1919
import { readFileConfig } from './read-file-config.js';
20+
import { rollupPluginMdx } from './rollup-plugin-mdx.js';
2021
import {
2122
PREBUNDLED_MODULES_DIR,
2223
rollupPluginPrebundleModules,
2324
} from './rollup-plugin-prebundle-modules.js';
2425
import { rollupPluginStorybookBuilder } from './rollup-plugin-storybook-builder.js';
2526

2627
const wdsPluginExternalGlobals = fromRollup(rollupPluginExternalGlobals);
28+
const wdsPluginMdx = fromRollup(rollupPluginMdx);
2729
const wdsPluginPrebundleModules = fromRollup(rollupPluginPrebundleModules);
2830
const wdsPluginStorybookBuilder = fromRollup(rollupPluginStorybookBuilder);
2931

@@ -76,6 +78,7 @@ export const start: WdsBuilder['start'] = async ({ startTime, options, router, s
7678
},
7779
wdsPluginPrebundleModules(env),
7880
wdsPluginStorybookBuilder(options),
81+
wdsPluginMdx(options),
7982
wdsPluginExternalGlobals(globalsNameReferenceMap || globals),
8083
],
8184
};
@@ -149,6 +152,7 @@ export const build: WdsBuilder['build'] = async ({ startTime, options }) => {
149152
rollupPluginNodeResolve(),
150153
rollupPluginPrebundleModules(env),
151154
rollupPluginStorybookBuilder(options),
155+
rollupPluginMdx(options),
152156
rollupPluginExternalGlobals(globalsNameReferenceMap || globals),
153157
],
154158
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { compile } from '@storybook/mdx2-csf';
2+
import type { Options } from '@storybook/types';
3+
import { readFile } from 'fs-extra';
4+
import remarkExternalLinks from 'remark-external-links';
5+
import remarkSlug from 'remark-slug';
6+
import type { Plugin } from 'rollup';
7+
8+
export function rollupPluginMdx(storybookOptions: Options): Plugin {
9+
let mdxPluginOptions: Record<string, any>;
10+
let jsxOptions: Record<string, any>;
11+
12+
return {
13+
name: 'rollup-plugin-mdx',
14+
15+
async buildStart() {
16+
({ mdxPluginOptions, jsxOptions } = await storybookOptions.presets.apply<Record<string, any>>(
17+
'options',
18+
{},
19+
));
20+
},
21+
22+
async resolveId(id) {
23+
if (id.endsWith('.mdx.js')) {
24+
return id;
25+
}
26+
},
27+
28+
async load(id) {
29+
if (!id.endsWith('.mdx.js')) return;
30+
31+
const mdxPath = id.replace(/\.js$/, '');
32+
const mdxCode = await readFile(mdxPath, 'utf8');
33+
34+
const mdxLoaderOptions = await storybookOptions.presets.apply('mdxLoaderOptions', {
35+
...mdxPluginOptions,
36+
mdxCompileOptions: {
37+
providerImportSource: '@mdx-js/react',
38+
...mdxPluginOptions?.mdxCompileOptions,
39+
remarkPlugins: [remarkSlug, remarkExternalLinks].concat(
40+
mdxPluginOptions?.mdxCompileOptions?.remarkPlugins ?? [],
41+
),
42+
},
43+
jsxOptions,
44+
});
45+
46+
const jsCode = compile(mdxCode, {
47+
skipCsf: true,
48+
...mdxLoaderOptions,
49+
});
50+
51+
return jsCode;
52+
},
53+
};
54+
}

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

+6-3
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,12 @@ export function rollupPluginPrebundleModules(env: Record<string, string>): Plugi
7878
// builder-vite bundles different dependencies for performance reasons
7979
// we aim only at browserifying NodeJS dependencies (CommonJS/process.env/...)
8080
export const CANDIDATES = [
81+
/* for different addons built with React and for MDX */
82+
'@storybook/react-dom-shim', // needs special resolution
83+
'react',
84+
process.env.NODE_ENV === 'production' ? 'react/jsx-runtime' : 'react/jsx-dev-runtime',
85+
'react-dom',
86+
8187
/* for different packages */
8288
'tiny-invariant',
8389

@@ -92,7 +98,6 @@ export const CANDIDATES = [
9298
'@testing-library/user-event',
9399

94100
/* for @storybook/addon-docs */
95-
'@storybook/react-dom-shim', // needs special resolution
96101
'color-convert',
97102
'doctrine',
98103
'lodash/cloneDeep.js',
@@ -101,8 +106,6 @@ export const CANDIDATES = [
101106
'lodash/throttle.js',
102107
'lodash/uniq.js',
103108
'memoizerific',
104-
'react',
105-
'react-dom',
106109
'tocbot',
107110

108111
/* for @storybook/addon-a11y */

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

+1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
"@storybook/addon-essentials": "^7.0.0",
7070
"@storybook/addon-interactions": "^7.0.0",
7171
"@storybook/addon-links": "^7.0.0",
72+
"@storybook/blocks": "^7.0.0",
7273
"@storybook/types": "^7.0.0",
7374
"@web/dev-server": "^0.4.0",
7475
"storybook": "^7.0.0"

0 commit comments

Comments
 (0)