Update docs + preact presets to not clobber each other.

storybookjs · Oct 12, 2022 · 8e0a57c · 8e0a57c
1 parent f9fcb87
commit 8e0a57c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
@@ -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,

diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts
@@ -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: {