dumi 2.4.49 → 2.4.50

package/dist/features/compile/index.js

@@ -176,7 +176,11 @@ var compile_default = (api) => {
       routes: api.appData.routes,
       locales: api.config.locales,
       pkg: api.pkg,
-      disableLiveDemo: (0, import_utils2.shouldDisabledLiveDemo)(api)
+      disableLiveDemo: (0, import_utils2.shouldDisabledLiveDemo)(api),
+      codeBlockBabelPlugins: (0, import_utils2.getCodeBlockBabelPlugins)(
+        api.config.extraBabelPlugins,
+        api.cwd
+      )
     };
     memo.module.rule("watch-parent").pre().resourceQuery(/watch=parent/).use("null-loader").loader(require.resolve("../../loaders/null")).end();
     const mdRule = memo.module.rule("dumi-md").type("javascript/auto").test(/\.md$/);

package/dist/features/compile/makoHooks.js

@@ -55,6 +55,10 @@ var customRunLoaders = async (options) => {
 var mdLoaderPath = require.resolve("../../loaders/markdown");
 var getLoadHook = (api) => {
   const disableLiveDemo = (0, import_utils2.shouldDisabledLiveDemo)(api);
+  const codeBlockBabelPlugins = (0, import_utils2.getCodeBlockBabelPlugins)(
+    api.config.extraBabelPlugins,
+    api.cwd
+  );
   return async (filePath) => {
     var _a, _b, _c, _d;
     const loaderBaseOpts = {
@@ -67,7 +71,8 @@ var getLoadHook = (api) => {
       routes: api.appData.routes,
       locales: api.config.locales || [],
       pkg: api.pkg,
-      disableLiveDemo
+      disableLiveDemo,
+      codeBlockBabelPlugins
     };
     const requestUrl = import_url.default.parse(filePath);
     const query = import_querystring.default.parse(requestUrl.query);

package/dist/features/compile/utils.d.ts

@@ -1,2 +1,10 @@
+import type { PluginItem } from '@umijs/bundler-utils/compiled/@babel/core';
 import { IApi } from 'umi';
 export declare const shouldDisabledLiveDemo: (api: IApi) => boolean;
+/**
+ * pick babel plugins which should be applied to code-block demos from `extraBabelPlugins`
+ * @param extraBabelPlugins  `extraBabelPlugins` config of umi
+ * @param cwd                project root, used to resolve plugin package
+ * @returns resolved plugin items, always JSON-serializable (loader options of utoopack require it)
+ */
+export declare function getCodeBlockBabelPlugins(extraBabelPlugins: unknown, cwd: string): PluginItem[];

package/dist/features/compile/utils.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/features/compile/utils.ts
 var utils_exports = {};
 __export(utils_exports, {
+  getCodeBlockBabelPlugins: () => getCodeBlockBabelPlugins,
   shouldDisabledLiveDemo: () => shouldDisabledLiveDemo
 });
 module.exports = __toCommonJS(utils_exports);
@@ -36,7 +37,49 @@ var shouldDisabledLiveDemo = (api) => {
   }
   return disableFlag;
 };
+var IMPORT_SENSITIVE_BABEL_PLUGINS = {
+  "@emotion": "@emotion/babel-plugin",
+  "@emotion/babel-plugin": "@emotion/babel-plugin"
+};
+var warnedMissingPlugins = /* @__PURE__ */ new Set();
+function getImportSensitivePluginTarget(name) {
+  if (name in IMPORT_SENSITIVE_BABEL_PLUGINS) {
+    return IMPORT_SENSITIVE_BABEL_PLUGINS[name];
+  }
+  const normalized = name.replace(/\\/g, "/");
+  const isPluginPath = Object.values(IMPORT_SENSITIVE_BABEL_PLUGINS).some(
+    (pkg) => normalized.endsWith(`/${pkg}`) || normalized.includes(`/${pkg}/`)
+  );
+  return isPluginPath ? name : void 0;
+}
+function getCodeBlockBabelPlugins(extraBabelPlugins, cwd) {
+  if (!(0, import_lodash.isArray)(extraBabelPlugins))
+    return [];
+  return extraBabelPlugins.reduce((ret, item) => {
+    const [name, options] = (0, import_lodash.isArray)(item) ? item : [item];
+    if (typeof name !== "string")
+      return ret;
+    const target = getImportSensitivePluginTarget(name);
+    if (!target)
+      return ret;
+    let pluginPath;
+    try {
+      pluginPath = require.resolve(target, { paths: [cwd] });
+    } catch {
+      if (!warnedMissingPlugins.has(target)) {
+        warnedMissingPlugins.add(target);
+        import_utils.logger.warn(
+          `\`${target}\` cannot be resolved, it will be skipped for code-block demos in markdown, install it if you need the transform result (e.g. auto label of emotion) for those demos.`
+        );
+      }
+      return ret;
+    }
+    ret.push(options === void 0 ? pluginPath : [pluginPath, options]);
+    return ret;
+  }, []);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getCodeBlockBabelPlugins,
   shouldDisabledLiveDemo
 });

package/dist/features/compile/utoopackLoaders.js

@@ -219,6 +219,10 @@ var getUtoopackRules = (api, config = api.config) => {
     locales: config.locales || [],
     pkg: api.pkg,
     disableLiveDemo,
+    codeBlockBabelPlugins: (0, import_utils2.getCodeBlockBabelPlugins)(
+      config.extraBabelPlugins,
+      api.cwd
+    ),
     [UTOOPACK_LOADER_CTX_KEY]: loaderContextPath
   });
   const externalDemoLoader = {

package/dist/loaders/markdown/transformer/index.d.ts

@@ -1,6 +1,7 @@
 import type { IParsedBlockAsset } from '../../../assetParsers/block';
 import type { ILocalesConfig, IRouteMeta } from '@/client/theme-api/types';
 import type { IApi, IDumiConfig, IDumiTechStack } from '../../../types';
+import type { PluginItem } from '@umijs/bundler-utils/compiled/@babel/core';
 import { type ResolveOptions } from 'enhanced-resolve';
 import type { IRoute } from 'umi';
 import type { Data } from 'vfile';
@@ -59,6 +60,11 @@ export interface IMdTransformerOptions {
     routes: Record<string, IRoute>;
     locales: ILocalesConfig;
     pkg: IApi['pkg'];
+    /**
+     * babel plugins which should be applied to code-block demos before wrapping,
+     * must be serializable, see `getCodeBlockBabelPlugins`
+     */
+    codeBlockBabelPlugins?: PluginItem[];
 }
 export interface IMdTransformerResult {
     content: string;

package/dist/loaders/markdown/transformer/index.js

@@ -115,7 +115,8 @@ var transformer_default = async (raw, opts) => {
     fileLocale,
     useUtoopackDemoHMR: opts.useUtoopackDemoHMR,
     resolve: opts.resolve,
-    resolver
+    resolver,
+    codeBlockBabelPlugins: opts.codeBlockBabelPlugins
   }).use(import_rehypeSlug.default).use(import_rehypeLink.default, {
     fileAbsPath: opts.fileAbsPath,
     routes: opts.routes

package/dist/loaders/markdown/transformer/rehypeDemo.d.ts

@@ -6,7 +6,7 @@ export declare const DEMO_PROP_VALUE_KEY = "$demo-prop-value-key";
 export declare const DUMI_DEMO_TAG = "DumiDemo";
 export declare const DUMI_DEMO_GRID_TAG = "DumiDemoGrid";
 export declare const SKIP_DEMO_PARSE = "pure";
-type IRehypeDemoOptions = Pick<IMdTransformerOptions, 'techStacks' | 'cwd' | 'fileAbsPath' | 'resolve'> & {
+type IRehypeDemoOptions = Pick<IMdTransformerOptions, 'techStacks' | 'cwd' | 'fileAbsPath' | 'resolve' | 'codeBlockBabelPlugins'> & {
     resolver: typeof sync;
     fileLocaleLessPath: string;
     fileLocale?: string;

package/dist/loaders/markdown/transformer/rehypeDemo.js

@@ -298,7 +298,8 @@ function rehypeDemo(opts) {
               );
               component = techStack.transformCode(codeValue, {
                 type: "code-block",
-                fileAbsPath: parseOpts.fileAbsPath
+                fileAbsPath: parseOpts.fileAbsPath,
+                babelPlugins: opts.codeBlockBabelPlugins
               });
             }
             const propDemo = { id: parseOpts.id };

package/dist/techStacks/react.js

@@ -51,7 +51,8 @@ var ReactTechStack = class {
         parserConfig: {
           syntax: isTSX ? "typescript" : "ecmascript",
           [isTSX ? "tsx" : "jsx"]: true
-        }
+        },
+        babelPlugins: opts.babelPlugins
       });
       return `React.memo(React.lazy(${code}))`;
     }

package/dist/techStacks/utils.d.ts

@@ -1,4 +1,5 @@
 import type { ParserConfig } from '@swc/core';
+import type { PluginItem } from '@umijs/bundler-utils/compiled/@babel/core';
 import { IDumiTechStack } from '../types';
 export { IDumiTechStack, IDumiTechStackOnBlockLoadArgs, IDumiTechStackOnBlockLoadResult, IDumiTechStackRuntimeOpts, } from '../types';
 /**
@@ -10,7 +11,21 @@ export declare function extractScript(htmlLike: string): string;
 export interface IWrapDemoWithFnOptions {
     filename: string;
     parserConfig: ParserConfig;
+    /**
+     * babel plugins which will be applied to the original code before wrapping.
+     * The wrapping rewrites static imports into dynamic imports, so plugins which
+     * rely on import declarations (e.g. @emotion/babel-plugin) must run before it,
+     * otherwise they never see the original `import` statements.
+     */
+    babelPlugins?: PluginItem[];
 }
+/**
+ * Apply babel plugins to the demo code while keeping its syntax as-is
+ * (no preset, only parse & print), so the result can still be handled by swc.
+ */
+export declare function applyBabelPlugins(code: string, opts: Pick<IWrapDemoWithFnOptions, 'filename' | 'parserConfig'> & {
+    plugins: PluginItem[];
+}): string;
 /**
  * Use swc to convert es module into async function.
  * More transform process detail, refer to:

package/dist/techStacks/utils.js

@@ -33,6 +33,7 @@ __export(utils_exports, {
   IDumiTechStackOnBlockLoadArgs: () => import_types.IDumiTechStackOnBlockLoadArgs,
   IDumiTechStackOnBlockLoadResult: () => import_types.IDumiTechStackOnBlockLoadResult,
   IDumiTechStackRuntimeOpts: () => import_types.IDumiTechStackRuntimeOpts,
+  applyBabelPlugins: () => applyBabelPlugins,
   defineTechStack: () => defineTechStack,
   extractScript: () => extractScript,
   wrapDemoWithFn: () => wrapDemoWithFn
@@ -50,9 +51,40 @@ function extractScript(htmlLike) {
   }
   return scripts;
 }
+function applyBabelPlugins(code, opts) {
+  const { filename, parserConfig, plugins } = opts;
+  if (!plugins.length)
+    return code;
+  const babel = require("@umijs/bundler-utils/compiled/babel/core");
+  const parserPlugins = [];
+  if (parserConfig.syntax === "typescript") {
+    parserPlugins.push("typescript");
+    if (parserConfig.tsx)
+      parserPlugins.push("jsx");
+  } else if (parserConfig.jsx) {
+    parserPlugins.push("jsx");
+  }
+  const result = babel.transformSync(code, {
+    filename,
+    babelrc: false,
+    configFile: false,
+    browserslistConfigFile: false,
+    sourceType: "module",
+    sourceMaps: false,
+    compact: false,
+    parserOpts: { plugins: parserPlugins },
+    plugins
+  });
+  return (result == null ? void 0 : result.code) ?? code;
+}
 function wrapDemoWithFn(code, opts) {
-  const { filename, parserConfig } = opts;
-  const result = (0, import_core.transformSync)(code, {
+  const { filename, parserConfig, babelPlugins } = opts;
+  const source = (babelPlugins == null ? void 0 : babelPlugins.length) ? applyBabelPlugins(code, {
+    filename,
+    parserConfig,
+    plugins: babelPlugins
+  }) : code;
+  const result = (0, import_core.transformSync)(source, {
     filename,
     jsc: {
       parser: parserConfig,
@@ -84,6 +116,7 @@ function defineTechStack(options) {
   IDumiTechStackOnBlockLoadArgs,
   IDumiTechStackOnBlockLoadResult,
   IDumiTechStackRuntimeOpts,
+  applyBabelPlugins,
   defineTechStack,
   extractScript,
   wrapDemoWithFn

package/dist/types.d.ts

@@ -4,6 +4,7 @@ import type { IDumiDemoProps } from '@/client/theme-api/DumiDemo';
 import type { ILocalesConfig, IThemeConfig } from '@/client/theme-api/types';
 import type { IContentTab } from './features/tabs';
 import type { IThemeLoadResult } from './features/theme/loader';
+import type { PluginItem } from '@umijs/bundler-utils/compiled/@babel/core';
 import { OnLoadArgs, OnLoadResult } from '@umijs/bundler-utils/compiled/esbuild';
 import type { IModify } from '@umijs/core';
 import type { AssetsPackage, ExampleBlockAsset } from 'dumi-assets-types';
@@ -98,6 +99,12 @@ export declare abstract class IDumiTechStack {
     abstract transformCode(raw: string, opts: {
         type: 'external' | 'code-block';
         fileAbsPath: string;
+        /**
+         * babel plugins which should be applied to the original source of code-block demo,
+         * before it is wrapped into an async function (which rewrites static imports
+         * into dynamic imports), e.g. @emotion/babel-plugin
+         */
+        babelPlugins?: PluginItem[];
     }): string;
     /**
      * generator for return asset metadata

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.4.49",
+  "version": "2.4.50",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -135,6 +135,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
+    "@emotion/babel-plugin": "^11.13.5",
     "@types/github-slugger": "^1.3.0",
     "@types/highlight-words-core": "^1.2.1",
     "@types/hosted-git-info": "^3.0.2",