Update docs + preact presets to not clobber each other.

This commit is contained in:
Tom Coleman 2022-10-12 12:56:27 +11:00
parent f9fcb87438
commit 8e0a57c854
2 changed files with 11 additions and 16 deletions

View File

@ -17,11 +17,20 @@ type BabelParams = {
};
function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: BabelParams) {
const babelPlugins = mdxBabelOptions?.plugins || babelOptions?.plugins || [];
const filteredBabelPlugins = babelPlugins.filter((p: any) => {
const name = Array.isArray(p) ? p[0] : p;
if (typeof name === 'string') {
return !name.includes('plugin-transform-react-jsx');
}
return true;
});
const jsxPlugin = [
require.resolve('@babel/plugin-transform-react-jsx'),
{ pragma: 'React.createElement', pragmaFrag: 'React.Fragment' },
];
const plugins = configureJSX ? [...babelPlugins, jsxPlugin] : babelPlugins;
const plugins = configureJSX ? [...filteredBabelPlugins, jsxPlugin] : babelPlugins;
return {
// don't use the root babelrc by default (users can override this in mdxBabelOptions)
babelrc: false,

View File

@ -14,7 +14,7 @@ export const babel: StorybookConfig['babelDefault'] = (config) => {
...(config.plugins || []).filter((p) => {
const name = Array.isArray(p) ? p[0] : p;
if (typeof name === 'string') {
return !name.includes('babel-plugin-transform-react-jsx');
return !name.includes('plugin-transform-react-jsx');
}
return true;
}),
@ -23,20 +23,6 @@ export const babel: StorybookConfig['babelDefault'] = (config) => {
};
export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => {
const rules = config.module?.rules || [];
const tsxRule = rules.find((rule) => (rule.test as RegExp).test?.('main.tsx'));
tsxRule.use = (tsxRule.use as any).map((entry: any) => {
let newPlugins = entry.options.plugins;
if (entry.loader?.includes('babel-loader')) {
newPlugins = (entry.options as any).plugins.map((plugin: any) => {
if (plugin[0]?.includes?.('@babel/plugin-transform-react-jsx')) {
return [plugin[0], { importSource: 'preact', runtime: 'automatic' }];
}
return plugin;
});
}
return { ...entry, options: { ...entry.options, plugins: newPlugins } };
});
return {
...config,
resolve: {