dumi 2.3.0-beta.2 → 2.3.0-beta.4

package/dist/constants.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/constants.ts
 var constants_exports = {};
 __export(constants_exports, {
+  FS_CACHE_DIR: () => FS_CACHE_DIR,
   LOCAL_DUMI_DIR: () => LOCAL_DUMI_DIR,
   LOCAL_PAGES_DIR: () => LOCAL_PAGES_DIR,
   LOCAL_THEME_DIR: () => LOCAL_THEME_DIR,
@@ -51,8 +52,10 @@ var PICKED_PKG_FIELDS = {
 var USELESS_TMP_FILES = ["tsconfig.json", "typings.d.ts"];
 var VERSION_2_LEVEL_NAV = "^2.2.0";
 var VERSION_2_DEPRECATE_SOFT_BREAKS = "^2.2.0";
+var FS_CACHE_DIR = "node_modules/.cache/dumi";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FS_CACHE_DIR,
   LOCAL_DUMI_DIR,
   LOCAL_PAGES_DIR,
   LOCAL_THEME_DIR,

package/dist/features/compile/index.js

@@ -33,29 +33,58 @@ __export(compile_exports, {
 });
 module.exports = __toCommonJS(compile_exports);
 var import_react = __toESM(require("../../techStacks/react"));
+var import_utils = require("../../utils");
+var import_path = __toESM(require("path"));
 var import_assets = require("../assets");
 var compile_default = (api) => {
+  const techStacks = [];
   api.describe({ key: "dumi:compile" });
   api.register({
     key: "registerTechStack",
     stage: Infinity,
     fn: () => new import_react.default()
   });
-  api.modifyConfig((memo) => {
-    if (memo.babelLoaderCustomize) {
-      api.logger.warn(
-        "Config `babelLoaderCustomize` will be override by dumi, please report issue if you need it."
+  api.modifyConfig({
+    stage: Infinity,
+    fn: (memo) => {
+      if (memo.babelLoaderCustomize) {
+        api.logger.warn(
+          "Config `babelLoaderCustomize` will be override by dumi, please report issue if you need it."
+        );
+      }
+      memo.babelLoaderCustomize = require.resolve("./babelLoaderCustomize");
+      const cacheDirPath = api.userConfig.cacheDirectoryPath || memo.cacheDirectoryPath;
+      if (cacheDirPath)
+        (0, import_utils._setFSCacheDir)(import_path.default.join(cacheDirPath, "dumi"));
+      return memo;
+    }
+  });
+  api.onGenerateFiles({
+    // make sure called before `addRuntimePlugin` key
+    // why not use `before: 'tmpFiles'`?
+    // because @umijs/preset-umi/.../tmpFiles has two `onGenerateFiles` key
+    // and `before` only insert before the last one
+    stage: -Infinity,
+    async fn() {
+      techStacks.push(
+        ...await api.applyPlugins({
+          key: "registerTechStack",
+          type: api.ApplyPluginsType.add
+        })
       );
     }
-    memo.babelLoaderCustomize = require.resolve("./babelLoaderCustomize");
-    return memo;
   });
+  api.addRuntimePlugin(
+    () => techStacks.reduce((acc, techStack) => {
+      var _a;
+      if ((_a = techStack.runtimeOpts) == null ? void 0 : _a.pluginPath) {
+        acc.push(techStack.runtimeOpts.pluginPath);
+      }
+      return acc;
+    }, [])
+  );
   api.chainWebpack(async (memo) => {
     const babelInUmi = memo.module.rule("src").use("babel-loader").entries();
-    const techStacks = await api.applyPlugins({
-      key: "registerTechStack",
-      type: api.ApplyPluginsType.add
-    });
     const loaderPath = require.resolve("../../loaders/markdown");
     const loaderBaseOpts = {
       techStacks,

package/dist/features/exports.js

@@ -32,13 +32,11 @@ __export(exports_exports, {
   default: () => exports_default
 });
 module.exports = __toCommonJS(exports_exports);
-var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 var exports_default = (api) => {
   api.describe({ key: "dumi:exports" });
   api.modifyConfig((memo) => {
     memo.alias["dumi$"] = "@@/dumi/exports";
-    memo.alias["dumi/dist"] = (0, import_plugin_utils.winPath)(import_path.default.join(__dirname, ".."));
     return memo;
   });
   api.onGenerateFiles(() => {

package/dist/features/parser.js

@@ -32,16 +32,38 @@ __export(parser_exports, {
   default: () => parser_default
 });
 module.exports = __toCommonJS(parser_exports);
+var import_utils = require("@umijs/utils");
 var import_assert = __toESM(require("assert"));
 var import_meta = require("./meta");
+function filterIgnoredProps(props) {
+  return import_utils.lodash.pickBy(props, (prop) => {
+    let isHidden = false;
+    if (prop.type === "array" && "items" in prop) {
+      prop.items = filterIgnoredProps({ _: prop.items })._;
+    } else if (prop.type === "object" && "properties" in prop) {
+      prop.properties = filterIgnoredProps(prop.properties);
+    } else if (prop.oneOf) {
+      prop.oneOf = prop.oneOf.filter(Boolean).map((item) => filterIgnoredProps({ _: item })._);
+    } else if (prop.allOf) {
+      prop.allOf = prop.allOf.filter(Boolean).map((item) => filterIgnoredProps({ _: item })._);
+    } else if ("hidden" in prop) {
+      isHidden = true;
+    }
+    return !isHidden;
+  });
+}
 var parser_default = (api) => {
   let prevData;
   const writeAtomsMetaFile = (data) => {
+    const components = import_utils.lodash.mapValues(data.components, (component) => ({
+      ...component,
+      propsConfig: filterIgnoredProps({ _: component.propsConfig })._
+    }));
     api.writeTmpFile({
       noPluginDir: true,
       path: import_meta.ATOMS_META_PATH,
       content: `export const components = ${JSON.stringify(
-        data.components,
+        components,
         null,
         2
       )};`

package/dist/features/theme/index.js

@@ -75,11 +75,12 @@ function getPkgThemePath(api) {
     })
   );
 }
-function getModuleExports(modulePath) {
-  return (0, import_bundler_utils.parseModuleSync)({
+async function getModuleExports(modulePath) {
+  const [_, exports] = await (0, import_bundler_utils.parseModule)({
     path: modulePath,
     content: import_fs.default.readFileSync(modulePath, "utf-8")
-  })[1];
+  });
+  return exports || [];
 }
 function checkMinor2ByPkg(pkg) {
   var _a, _b, _c;
@@ -254,14 +255,14 @@ export default DumiLoading;
       });
     }
   });
-  api.onGenerateFiles(() => {
+  api.onGenerateFiles(async () => {
     var _a, _b, _c, _d, _e;
-    themeMapKeys.forEach((key) => {
-      Object.values(originalThemeData[key] || {}).forEach((item) => {
+    const pAll = themeMapKeys.flatMap(
+      (key) => Object.values(originalThemeData[key] || {}).map(async (item) => {
         if (item.source === "dumi")
           return;
-        let contents = [];
-        const exports = getModuleExports(item.source);
+        const exports = await getModuleExports(item.source);
+        const contents = [];
         if (exports.includes("default")) {
           contents.push(`export { default } from '${item.source}';`);
         }
@@ -273,10 +274,11 @@ export default DumiLoading;
           path: `dumi/theme/${key}/${item.specifier}.ts`,
           content: contents.join("\n")
         });
-      });
-    });
+      })
+    );
+    await Promise.all(pAll);
     const entryFile = api.config.resolve.entryFile && [import_path.default.resolve(api.cwd, api.config.resolve.entryFile)].find(import_fs.default.existsSync);
-    const entryExports = entryFile ? getModuleExports(entryFile) : [];
+    const entryExports = entryFile ? await getModuleExports(entryFile) : [];
     const hasDefaultExport = entryExports.includes("default");
     const hasNamedExport = entryExports.some((exp) => exp !== "default");
     api.writeTmpFile({

package/dist/loaders/markdown/index.js

@@ -86,7 +86,8 @@ export const demos = {
   '{{{id}}}': {
     component: {{{component}}},
     asset: {{{renderAsset}}},
-    context: {{{renderContext}}}
+    context: {{{renderContext}}},
+    renderOpts: {{{renderRenderOpts}}},
   },
   {{/demos}}
 };`,
@@ -98,24 +99,41 @@ export const demos = {
         let { asset } = this;
         const { resolveMap } = this;
         Object.keys(this.resolveMap).forEach((file) => {
-          if (!asset.dependencies[file])
-            return;
-          asset = import_plugin_utils.lodash.cloneDeep(asset);
-          asset.dependencies[file].value = `{{{require('-!${resolveMap[file]}?dumi-raw').default}}}`;
+          var _a;
+          if (((_a = asset.dependencies[file]) == null ? void 0 : _a.type) === "FILE") {
+            asset = import_plugin_utils.lodash.cloneDeep(asset);
+            asset.dependencies[file].value = `{{{require('-!${resolveMap[file]}?dumi-raw').default}}}`;
+          }
         });
         return JSON.stringify(asset, null, 2).replace(/"{{{|}}}"/g, "");
       },
       renderContext: function renderContext() {
-        if (!("resolveMap" in this))
+        if (!("resolveMap" in this) || !("asset" in this))
           return "undefined";
+        const entryFileName = Object.keys(this.asset.dependencies)[0];
         const context = Object.entries(this.resolveMap).reduce(
           (acc, [key, path]) => ({
             ...acc,
-            [key]: `{{{require('${path}')}}}`
+            // omit entry file
+            ...key !== entryFileName ? {
+              [key]: `{{{require('${path}')}}}`
+            } : {}
           }),
           {}
         );
         return JSON.stringify(context, null, 2).replace(/"{{{|}}}"/g, "");
+      },
+      renderRenderOpts: function renderRenderOpts() {
+        if (!("renderOpts" in this) || !this.renderOpts.compilePath) {
+          return "undefined";
+        }
+        return `{
+          compile: async (...args) => {
+            return (await import('${(0, import_plugin_utils.winPath)(
+          this.renderOpts.compilePath
+        )}')).default(...args);
+          },
+        }`;
       }
     }
   );

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

@@ -1,6 +1,6 @@
 import type { IParsedBlockAsset } from "../../../assetParsers/block";
 import type { ILocalesConfig, IRouteMeta } from "../../../client/theme-api/types";
-import type { IApi, IDumiConfig, IDumiTechStack } from "../../../types";
+import type { IApi, IDumiConfig, IDumiTechStack, IDumiTechStackRuntimeOpts } from "../../../types";
 import type { IRoute } from 'umi';
 import type { Data } from 'vfile';
 declare module 'hast' {
@@ -22,6 +22,7 @@ declare module 'vfile' {
             component: string;
             asset: IParsedBlockAsset['asset'];
             resolveMap: IParsedBlockAsset['resolveMap'];
+            renderOpts: Pick<IDumiTechStackRuntimeOpts, 'compilePath'>;
         } | {
             id: string;
             component: string;

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

@@ -78,6 +78,7 @@ var transformer_default = async (raw, opts) => {
   const { default: rehypeAutolinkHeadings } = await import("rehype-autolink-headings");
   const { default: rehypeRemoveComments } = await import("rehype-remove-comments");
   const resolver = import_enhanced_resolve.default.create.sync({
+    mainFields: ["browser", "module", "main"],
     extensions: [".js", ".jsx", ".ts", ".tsx"],
     alias: opts.alias
   });

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

@@ -226,7 +226,7 @@ function rehypeDemo(opts) {
             deferrers.push(
               (0, import_block.default)(parseOpts).then(
                 async ({ asset, resolveMap, frontmatter }) => {
-                  var _a2, _b2, _c2;
+                  var _a2, _b2, _c2, _d;
                   if (demoIds.indexOf(parseOpts.id) !== demoIds.lastIndexOf(parseOpts.id)) {
                     const startLine = (_a2 = node.position) == null ? void 0 : _a2.start.line;
                     const suffix = startLine ? `:${startLine}` : "";
@@ -299,7 +299,10 @@ function rehypeDemo(opts) {
                     resolveMap: techStack.generateSources ? await techStack.generateSources(
                       resolveMap,
                       techStackOpts
-                    ) : resolveMap
+                    ) : resolveMap,
+                    renderOpts: {
+                      compilePath: (_d = techStack.runtimeOpts) == null ? void 0 : _d.compilePath
+                    }
                   };
                 }
               )

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

@@ -38,6 +38,7 @@ var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 var import_url = __toESM(require("url"));
+var import_remarkContainer = __toESM(require("./remarkContainer"));
 var EMBED_OPEN_TAG = "<embed ";
 var EMBED_CLOSE_TAG = "</embed>";
 var unified;
@@ -129,7 +130,7 @@ function remarkEmbed(opts) {
           const {
             result: mdast,
             data: { embeds }
-          } = unified().use(remarkParse).use(remarkEmbed, { ...opts, fileAbsPath: absPath }).use(remarkFrontmatter).use(remarkDirective).use(remarkGfm).use(remarkReplaceSrc, {
+          } = unified().use(remarkParse).use(remarkEmbed, { ...opts, fileAbsPath: absPath }).use(remarkFrontmatter).use(remarkDirective).use(import_remarkContainer.default).use(remarkGfm).use(remarkReplaceSrc, {
             fileAbsPath: absPath,
             parentAbsPath: opts.fileAbsPath
           }).use(remarkRawAST).processSync(content);

package/dist/techStacks/react.d.ts

@@ -1,6 +1,7 @@
 import type { IDumiTechStack } from "../types";
 export default class ReactTechStack implements IDumiTechStack {
     name: string;
+    runtimeOpts?: IDumiTechStack['runtimeOpts'];
     isSupported(...[, lang]: Parameters<IDumiTechStack['isSupported']>): boolean;
     transformCode(...[raw, opts]: Parameters<IDumiTechStack['transformCode']>): string;
 }

package/dist/techStacks/react.js

@@ -36,6 +36,9 @@ var import_core = require("@swc/core");
 var ReactTechStack = class {
   constructor() {
     this.name = "react";
+    this.runtimeOpts = {
+      compilePath: require.resolve("../client/misc/reactDemoCompiler")
+    };
   }
   isSupported(...[, lang]) {
     return ["jsx", "tsx"].includes(lang);

package/dist/templates/meta/exports.ts.tpl

@@ -1,6 +1,38 @@
 import { filesMeta, tabsMeta } from '.';
 import type { IDemoData, IRouteMeta } from 'dumi/dist/client/theme-api/types';
-import { use } from 'dumi/dist/client/theme-api/utils';
+
+// Copy from React official demo.
+type ReactPromise<T> = Promise<T> & {
+  status?: 'pending' | 'fulfilled' | 'rejected';
+  value?: T;
+  reason?: any;
+};
+
+/**
+ * @private Internal usage. Safe to remove
+ */
+export function use<T>(promise: ReactPromise<T>): T {
+  if (promise.status === 'fulfilled') {
+    return promise.value!;
+  } else if (promise.status === 'rejected') {
+    throw promise.reason;
+  } else if (promise.status === 'pending') {
+    throw promise;
+  } else {
+    promise.status = 'pending';
+    promise.then(
+      (result) => {
+        promise.status = 'fulfilled';
+        promise.value = result;
+      },
+      (reason) => {
+        promise.status = 'rejected';
+        promise.reason = reason;
+      },
+    );
+    throw promise;
+  }
+}
 
 const demoIdMap = Object.keys(filesMeta).reduce((total, current) => {
   if (filesMeta[current].demoIndex) {

package/dist/types.d.ts

@@ -48,11 +48,25 @@ export type IDumiUserConfig = Subset<Omit<IDumiConfig, 'locales'>> & {
     }>, 'base'>[];
     [key: string]: any;
 };
+export interface IDumiTechStackRuntimeOpts {
+    /**
+     * path to runtime compile function module
+     */
+    compilePath?: string;
+    /**
+     * path to runtime plugin for this tech stack
+     */
+    pluginPath?: string;
+}
 export declare abstract class IDumiTechStack {
     /**
      * tech stack name, such as 'react'
      */
     abstract name: string;
+    /**
+     * runtime options
+     */
+    abstract runtimeOpts?: IDumiTechStackRuntimeOpts;
     /**
      * transform code
      */

package/dist/utils.d.ts

@@ -21,10 +21,8 @@ export declare function parseCodeFrontmatter(raw: string): {
     code: string;
     frontmatter: Record<string, any> | null;
 };
-/**
- * get file-system cache for specific namespace
- */
 declare const caches: Record<string, ReturnType<typeof Cache>>;
+export declare function _setFSCacheDir(dir: string): void;
 export declare function getCache(ns: string): (typeof caches)['0'];
 /**
  * try to get father config

package/dist/utils.js

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/utils.ts
 var utils_exports = {};
 __export(utils_exports, {
+  _setFSCacheDir: () => _setFSCacheDir,
   componentToChunkName: () => componentToChunkName,
   generateMetaChunkName: () => generateMetaChunkName,
   getCache: () => getCache,
@@ -47,6 +48,7 @@ var import_fs = __toESM(require("fs"));
 var import_js_yaml = __toESM(require("js-yaml"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
+var import_constants = require("./constants");
 function getFileIdFromFsPath(fsPath) {
   return import_plugin_utils.lodash.kebabCase((0, import_plugin_utils.winPath)(fsPath).replace(/((\/|^)index)?\.\w+$/g, ""));
 }
@@ -80,8 +82,11 @@ function parseCodeFrontmatter(raw) {
   }
   return { code: frontmatter ? code : raw, frontmatter };
 }
+var cacheDir = import_constants.FS_CACHE_DIR;
 var caches = {};
-var CACHE_PATH = "node_modules/.cache/dumi";
+function _setFSCacheDir(dir) {
+  cacheDir = dir;
+}
 function getCache(ns) {
   if (process.env.DUMI_CACHE === "none") {
     return { set() {
@@ -90,7 +95,7 @@ function getCache(ns) {
     }, getSync() {
     } };
   }
-  return caches[ns] ?? (caches[ns] = (0, import_file_system_cache.default)({ basePath: import_path.default.join(CACHE_PATH, ns) }));
+  return caches[ns] ?? (caches[ns] = (0, import_file_system_cache.default)({ basePath: import_path.default.resolve(cacheDir, ns) }));
 }
 async function tryFatherBuildConfigs(cwd) {
   let configs = [];
@@ -156,6 +161,7 @@ function getContentHash(content2, length = 8) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  _setFSCacheDir,
   componentToChunkName,
   generateMetaChunkName,
   getCache,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.3.0-beta.2",
+  "version": "2.3.0-beta.4",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",

package/theme-default/builtins/Previewer/index.js

@@ -1,16 +1,10 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ReactComponent as IconError } from '@ant-design/icons-svg/inline-svg/filled/close-circle.svg';
 import classnames from 'classnames';
 import { useLiveDemo, useLocation } from 'dumi';
 import PreviewerActions from 'dumi/theme/slots/PreviewerActions';
-import React, { useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import "./index.less";
 var Previewer = function Previewer(props) {
   var _demoContainer$curren;
@@ -18,15 +12,14 @@ var Previewer = function Previewer(props) {
   var _useLocation = useLocation(),
     hash = _useLocation.hash;
   var link = "#".concat(props.asset.id);
-  var _useLiveDemo = useLiveDemo(props.asset.id),
+  var _useLiveDemo = useLiveDemo(props.asset.id, {
+      iframe: Boolean(props.iframe),
+      containerRef: demoContainer
+    }),
     liveDemoNode = _useLiveDemo.node,
     liveDemoError = _useLiveDemo.error,
+    liveDemoLoading = _useLiveDemo.loading,
     setLiveDemoSource = _useLiveDemo.setSource;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    editorError = _useState2[0],
-    setEditorError = _useState2[1];
-  var combineError = liveDemoError || editorError;
   return /*#__PURE__*/React.createElement("div", {
     id: props.asset.id,
     className: classnames('dumi-default-previewer', props.className),
@@ -41,15 +34,17 @@ var Previewer = function Previewer(props) {
     "data-compact": props.compact || undefined,
     "data-transform": props.transform || undefined,
     "data-iframe": props.iframe || undefined,
+    "data-error": Boolean(liveDemoError) || undefined,
+    "data-loading": liveDemoLoading || undefined,
     ref: demoContainer
   }, props.iframe ? /*#__PURE__*/React.createElement("iframe", {
     style: ['string', 'number'].includes(_typeof(props.iframe)) ? {
       height: Number(props.iframe)
     } : {},
     src: props.demoUrl
-  }) : liveDemoNode || props.children), combineError && /*#__PURE__*/React.createElement("div", {
+  }) : liveDemoNode || props.children), liveDemoError && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-previewer-demo-error"
-  }, /*#__PURE__*/React.createElement(IconError, null), combineError.toString()), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(IconError, null), liveDemoError.toString()), /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-previewer-meta"
   }, (props.title || props.debug) && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-previewer-desc"
@@ -61,22 +56,7 @@ var Previewer = function Previewer(props) {
       __html: props.description
     }
   })), /*#__PURE__*/React.createElement(PreviewerActions, _extends({}, props, {
-    onSourceTranspile: function onSourceTranspile(_ref) {
-      var err = _ref.err,
-        source = _ref.source;
-      if (err) {
-        setEditorError(err);
-      } else {
-        setEditorError(null);
-        setLiveDemoSource(source);
-        if (props.iframe) {
-          demoContainer.current.querySelector('iframe').contentWindow.postMessage({
-            type: 'dumi.liveDemo.setSource',
-            value: source
-          });
-        }
-      }
-    },
+    onSourceChange: setLiveDemoSource,
     demoContainer: props.iframe ? (_demoContainer$curren = demoContainer.current) === null || _demoContainer$curren === void 0 ? void 0 : _demoContainer$curren.firstElementChild : demoContainer.current
   }))));
 };

package/theme-default/builtins/Previewer/index.less

@@ -1,6 +1,8 @@
 @import (reference) '../../styles/variables.less';
 
 .@{prefix}-previewer {
+  @error-bar-height: 30px;
+
   margin: 24px 0 32px;
   border: 1px solid @c-border-light;
   border-radius: 4px;
@@ -38,17 +40,11 @@
     &[data-iframe] {
       position: relative;
       padding: 0;
-      overflow: hidden;
-
-      &::before {
-        content: '';
-        display: block;
-        height: 24px;
-        background-color: @c-border-light;
+      border-top: 24px solid @c-border-light;
+      box-sizing: border-box;
 
-        @{dark-selector} & {
-          background-color: @c-border-less-dark;
-        }
+      @{dark-selector} & {
+        border-top-color: @c-border-less-dark;
       }
 
       &::after {
@@ -57,7 +53,7 @@
 
         content: '';
         position: absolute;
-        top: 5px;
+        top: -19px;
         left: @btn-gap;
         display: inline-block;
         width: @btn-width;
@@ -76,16 +72,64 @@
     &[data-compact] {
       padding: 0;
     }
+
+    // error status
+    &[data-error][data-compact] {
+      min-height: @error-bar-height;
+
+      + .@{prefix}-previewer-demo-error {
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+      }
+    }
+
+    // loading status
+    &[data-loading] {
+      position: relative;
+
+      &::before {
+        @size: 28px;
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        content: '';
+        display: block;
+        height: @size;
+        max-height: 90%;
+        aspect-ratio: 1;
+        border-radius: 50%;
+        border: (@size / 10) solid;
+        border-color: @c-primary transparent;
+        box-sizing: border-box;
+        animation: dumi-previewer-loading 1s infinite;
+        transform: translate(-50%, -50%);
+
+        @{dark-selector} & {
+          border-color: @c-primary-dark transparent;
+        }
+
+        @keyframes dumi-previewer-loading {
+          to {
+            transform: translate(-50%, -50%) rotate(0.5turn);
+          }
+        }
+      }
+
+      > * {
+        opacity: 0.3 !important;
+      }
+    }
   }
 
   &-demo-error {
-    @height: 30px;
     @color: darken(desaturate(@c-error, 20%), 1%);
 
-    margin-top: -@height;
-    height: @height;
+    position: relative;
+    margin-top: -@error-bar-height;
+    height: @error-bar-height;
     padding: 0 24px;
-    line-height: @height;
+    line-height: @error-bar-height;
     color: @color;
     font-size: 13px;
     white-space: nowrap;