Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite/MDX: Fix mdx compiler for vite #20121

Merged
merged 3 commits into from
Dec 7, 2022
Merged

Vite/MDX: Fix mdx compiler for vite #20121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab763c8
remove unused dependencies which actually leak peerDeps up
ndelangen Dec 7, 2022
3e7c1dd
Merge branch 'next' into fix/more-peerdeps
ndelangen Dec 7, 2022
e1a3a82
change the vite mdx plugin to use the mdxCompilerOptions from the pre…
ndelangen Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions code/lib/builder-vite/src/plugins/mdx-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { Options } from '@storybook/types';
import type { Plugin } from 'vite';
import { createFilter } from 'vite';

Expand All @@ -18,7 +19,7 @@ function injectRenderer(code: string) {
*
* @see https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#csf-stories-with-arbitrary-mdx
*/
export function mdxPlugin(): Plugin {
export function mdxPlugin(options: Options): Plugin {
let reactRefresh: Plugin | undefined;
const include = /\.mdx?$/;
const filter = createFilter(include);
Expand All @@ -41,12 +42,23 @@ export function mdxPlugin(): Plugin {
reactRefresh = reactRefreshPlugins.find((p) => p.transform);
},

async transform(src, id, options) {
async transform(src, id, transformOptions) {
if (!filter(id)) return undefined;

const { compile } = await import('@storybook/mdx2-csf');

const mdxCode = String(await compile(src, { skipCsf: !isStorybookMdx(id) }));
const mdxLoaderOptions = await options.presets.apply('mdxLoaderOptions', {
mdxCompileOptions: {
providerImportSource: '@storybook/addon-docs/mdx-react-shim',
},
});

const mdxCode = String(
await compile(src, {
skipCsf: !isStorybookMdx(id),
...mdxLoaderOptions,
})
);

const modifiedCode = injectRenderer(mdxCode);

Expand All @@ -56,7 +68,7 @@ export function mdxPlugin(): Plugin {

// It's safe to disable this, because we know it'll be there, since we added it ourselves.
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const result = await transform!.call(this, modifiedCode, `${id}.jsx`, options);
const result = await transform!.call(this, modifiedCode, `${id}.jsx`, transformOptions);

if (!result) return modifiedCode;

Expand Down
2 changes: 1 addition & 1 deletion code/lib/builder-vite/src/vite-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export async function pluginConfig(options: ExtendedOptions) {
const plugins = [
codeGeneratorPlugin(options),
// sourceLoaderPlugin(options),
mdxPlugin(),
mdxPlugin(options),
injectExportOrderPlugin,
stripStoryHMRBoundary(),
{
Expand Down
3 changes: 0 additions & 3 deletions code/presets/react-webpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,12 @@
"semver": "^7.3.7"
},
"devDependencies": {
"@types/util-deprecate": "^1.0.0",
"typescript": "~4.9.3"
},
"peerDependencies": {
"@babel/core": "^7.11.5",
"jest-specific-snapshot": "^7.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"require-from-string": "^2.0.2",
"webpack": "5"
},
"peerDependenciesMeta": {
Expand Down
3 changes: 0 additions & 3 deletions code/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6788,7 +6788,6 @@ __metadata:
"@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
"@types/node": ^16.0.0
"@types/semver": ^7.3.4
"@types/util-deprecate": ^1.0.0
babel-plugin-add-react-displayname: ^0.0.5
babel-plugin-react-docgen: ^4.2.1
fs-extra: ^9.0.1
Expand All @@ -6797,10 +6796,8 @@ __metadata:
typescript: ~4.9.3
peerDependencies:
"@babel/core": ^7.11.5
jest-specific-snapshot: ^7.0.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
require-from-string: ^2.0.2
webpack: 5
peerDependenciesMeta:
"@babel/core":
Expand Down