fix: livedemo disabled when config babel-plugin-import (#2195)

* fix: livedemo disabled when config babel-plugin-import

* docs: guide to faq

* docs: simple faq

Author: Jinbao1001

Diff for: docs/guide/faq.md

@@ -218,3 +218,14 @@ import './index.css';
 ## 是否支持三级导航？
 
 不支持。如果文档目录结构的复杂度超过 3 级，应该考虑优化文档整体结构而非使用三级导航。如果有特殊场景需要，可以自定义主题实现。
+
+## ## 为什么 live demo 和 babel-plugin-import 无法一起使用？
+
+live demo 需要的正是全量引入，和 babel-plugin-import 的工作逻辑有冲突。
+
+解决方案:
+
+- 不需要 live demo：忽略警告即可
+- 希望开启 live demo：
+  - style: false 直接去掉插件即可
+  - 否则借助 .dumi/global.css 加载组件样式，可以参考 [and ssr 静态样式导出](https://ant.design/docs/blog/extract-ssr-cn#static-extract-style)提取`css`文件。

Diff for: src/features/compile/index.ts

@@ -7,6 +7,7 @@ import fs from 'fs';
 import path from 'path';
 import { addAtomMeta, addExampleAssets } from '../assets';
 import { getLoadHook } from './makoHooks';
+import { shouldDisabledLiveDemo } from './utils';
 export const techStacks: IDumiTechStack[] = [];
 export default (api: IApi) => {
   api.describe({ key: 'dumi:compile' });
@@ -87,12 +88,6 @@ export default (api: IApi) => {
     const babelInUmi = memo.module.rule('src').use('babel-loader').entries();
     if (!babelInUmi) return memo;
     const loaderPath = require.resolve('../../loaders/markdown');
-
-    // support require mjs packages(eg. element-plus/es)
-    // memo.resolve.byDependency.set('commonjs', {
-    //   conditionNames: ['require', 'node', 'import'],
-    // });
-
     const loaderBaseOpts: Partial<IMdLoaderOptions> = {
       techStacks,
       cwd: api.cwd,
@@ -103,6 +98,7 @@ export default (api: IApi) => {
       routes: api.appData.routes,
       locales: api.config.locales,
       pkg: api.pkg,
+      disableLiveDemo: shouldDisabledLiveDemo(api),
     };
     memo.module
       .rule('watch-parent')

Diff for: src/features/compile/makoHooks.ts

@@ -6,6 +6,7 @@ import url from 'url';
 import { techStacks } from '.';
 import { RunLoaderOption, runLoaders } from '../../utils';
 import { addAtomMeta, addExampleAssets } from '../assets';
+import { shouldDisabledLiveDemo } from './utils';
 
 interface ICustomerRunLoaderInterface extends RunLoaderOption {
   type?: 'css' | 'js' | 'jsx';
@@ -31,6 +32,7 @@ const customRunLoaders = async (options: ICustomerRunLoaderInterface) => {
 const mdLoaderPath = require.resolve('../../loaders/markdown');
 
 export const getLoadHook = (api: IApi) => {
+  const disableLiveDemo = shouldDisabledLiveDemo(api);
   return async (filePath: string) => {
     const loaderBaseOpts: Partial<IMdLoaderOptions> = {
       techStacks,
@@ -42,6 +44,7 @@ export const getLoadHook = (api: IApi) => {
       routes: api.appData.routes,
       locales: api.config.locales || [],
       pkg: api.pkg,
+      disableLiveDemo,
     };
 
     const requestUrl = url.parse(filePath);

Diff for: src/features/compile/utils.ts

@@ -0,0 +1,17 @@
+import { logger } from '@umijs/utils';
+import { isArray } from '@umijs/utils/compiled/lodash';
+import { IApi } from 'umi';
+export const shouldDisabledLiveDemo = (api: IApi) => {
+  const extraBabelPlugins = api.userConfig.extraBabelPlugins;
+  const disableFlag =
+    isArray(extraBabelPlugins) &&
+    extraBabelPlugins!.some((p: any) =>
+      /^import$|babel-plugin-import/.test(p[0]),
+    );
+  if (disableFlag) {
+    logger.warn(
+      'live demo feature has been automatically disabled since babel-plugin-import be registered, if you want to enable live demo feature, checkout: https://d.umijs.org/guide/faq',
+    );
+  }
+  return disableFlag;
+};

Diff for: src/loaders/markdown/index.ts

@@ -21,6 +21,7 @@ interface IMdLoaderDefaultModeOptions
     atomId: string,
     meta: IMdTransformerResult['meta']['frontmatter'],
   ) => void;
+  disableLiveDemo: boolean;
 }
 
 interface IMdLoaderDemosModeOptions
@@ -166,21 +167,21 @@ function emitDemo(
     }
   });
 
-  const dedupedDemosDeps = Object.entries(demoDepsMap).reduce<
-    IDemoDependency[]
-  >((acc, [, deps]) => {
-    return acc.concat(
-      Object.entries(deps)
-        .map(([key, specifier]) => {
-          const existingIndex = acc.findIndex((obj) => obj.key === key);
-          if (existingIndex === -1) {
-            return { key, specifier };
-          }
-          return undefined;
-        })
-        .filter((item) => item !== undefined),
-    );
-  }, []);
+  const dedupedDemosDeps = opts.disableLiveDemo
+    ? []
+    : Object.entries(demoDepsMap).reduce<IDemoDependency[]>((acc, [, deps]) => {
+        return acc.concat(
+          Object.entries(deps)
+            .map(([key, specifier]) => {
+              const existingIndex = acc.findIndex((obj) => obj.key === key);
+              if (existingIndex === -1) {
+                return { key, specifier };
+              }
+              return undefined;
+            })
+            .filter((item) => item !== undefined),
+        );
+      }, []);
   return Mustache.render(
     `import React from 'react';
 import '${winPath(this.getDependencies()[0])}?watch=parent';
@@ -231,8 +232,13 @@ export const demos = {
       renderContext: function renderContext(
         this: NonNullable<typeof demos>[0],
       ) {
-        // do not render context for inline demo
-        if (!('resolveMap' in this) || !('asset' in this)) return 'undefined';
+        // do not render context for inline demo && config babel-import-plugin project
+        if (
+          !('resolveMap' in this) ||
+          !('asset' in this) ||
+          opts.disableLiveDemo
+        )
+          return 'undefined';
         const context = Object.entries(demoDepsMap[this.id]).reduce(
           (acc, [key, specifier]) => ({
             ...acc,
@@ -245,7 +251,7 @@ export const demos = {
       renderRenderOpts: function renderRenderOpts(
         this: NonNullable<typeof demos>[0],
       ) {
-        if (!('renderOpts' in this)) {
+        if (!('renderOpts' in this) || opts.disableLiveDemo) {
           return 'undefined';
         }
         const renderOpts = this.renderOpts;