GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 15:31:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use plugin-react dependency, instead of from config

Browse Source
This commit is contained in:
Ian VanSchooten 2022-12-12 23:40:19 -05:00
parent c0ebe64b87
commit eb6dd037a1
1 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import type { Options } from '@storybook/types';
import type { Plugin } from 'vite';
import { createFilter } from 'vite';
import reactVite from '@vitejs/plugin-react';
const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx');
@ -11,6 +12,11 @@ function injectRenderer(code: string) {
`;
}
// HACK: find a better way to do this, ideally avoiding @vitejs/plugin-react entirely.
// We're just using it to run the mdx with jsx through babel
// @ts-expect-error we know these have names, and what the shape will be
const viteBabel: Plugin | undefined = reactVite().find((p) => p.name === 'vite:react-babel');
/**
* Storybook uses two different loaders when dealing with MDX:
*
@ -20,28 +26,12 @@ 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(options: Options): Plugin {
let reactRefresh: Plugin | undefined;
const include = /\.mdx?$/;
const filter = createFilter(include);
return {
name: 'storybook:mdx-plugin',
enforce: 'pre',
configResolved({ plugins }) {
// @vitejs/plugin-react-refresh has been upgraded to @vitejs/plugin-react,
// and the name of the plugin performing `transform` has been changed from 'react-refresh' to 'vite:react-babel',
// to be compatible, we need to look for both plugin name.
// We should also look for the other plugins names exported from @vitejs/plugin-react in case there are some internal refactors.
const reactRefreshPlugins = plugins.filter(
(p) =>
p.name === 'react-refresh' ||
p.name === 'vite:react-babel' ||
p.name === 'vite:react-refresh' ||
p.name === 'vite:react-jsx'
);
reactRefresh = reactRefreshPlugins.find((p) => p.transform);
},
async transform(src, id, transformOptions) {
if (!filter(id)) return undefined;
@ -63,7 +53,7 @@ export function mdxPlugin(options: Options): Plugin {
const modifiedCode = injectRenderer(mdxCode);
// Hooks in recent rollup versions can be functions or objects, and though react hasn't changed, the typescript defs have
const rTransform = reactRefresh?.transform;
const rTransform = viteBabel?.transform;
const transform = rTransform && 'handler' in rTransform ? rTransform.handler : rTransform;
// It's safe to disable this, because we know it'll be there, since we added it ourselves.