dumi 2.3.0-alpha.7 → 2.3.0-alpha.8

package/dist/client/theme-api/evalCode.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentType } from 'react';
+export declare const evalCode: (code: string, scope: any) => ComponentType;

package/dist/client/theme-api/evalCode.js

@@ -0,0 +1,17 @@
+function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+export var evalCode = function evalCode(code, scope) {
+  var scopeKeys = Object.keys(scope);
+  var scopeValues = scopeKeys.map(function (key) {
+    return scope[key];
+  });
+  var importReg = /import.*from.*;/g;
+  return _construct(Function, scopeKeys.concat([code.replace(importReg, '').replace('export default', 'return').trim()])).apply(void 0, _toConsumableArray(scopeValues));
+};

package/dist/client/theme-api/index.d.ts

@@ -4,6 +4,8 @@ export { DumiDemo } from './DumiDemo';
 export { DumiDemoGrid } from './DumiDemoGrid';
 export { DumiPage } from './DumiPage';
 export { useDemoData, useSiteData } from './context';
+export { evalCode } from './evalCode';
+export { LiveContext, LiveProvider, isLiveEnabled } from './live';
 export { openCodeSandbox } from './openCodeSandbox';
 export { openStackBlitz } from './openStackBlitz';
 export type { IPreviewerProps } from './types';

package/dist/client/theme-api/index.js

@@ -4,6 +4,8 @@ export { DumiDemo } from "./DumiDemo";
 export { DumiDemoGrid } from "./DumiDemoGrid";
 export { DumiPage } from "./DumiPage";
 export { useDemoData, useSiteData } from "./context";
+export { evalCode } from "./evalCode";
+export { LiveContext, LiveProvider, isLiveEnabled } from "./live";
 export { openCodeSandbox } from "./openCodeSandbox";
 export { openStackBlitz } from "./openStackBlitz";
 export { useAtomAssets } from "./useAtomAssets";

package/dist/client/theme-api/live/LiveProvider.d.ts

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+type LiveContextProps = {
+    enabled: boolean;
+    code: string;
+    onCodeChange: (code: string) => void;
+    demo: React.ReactNode;
+    error: string;
+};
+export declare const LiveContext: React.Context<LiveContextProps>;
+export type LiveProviderProps = {
+    initialCode: string;
+    demoId: string;
+    children: React.ReactElement;
+};
+export declare const LiveProvider: FC<LiveProviderProps>;
+export default LiveProvider;

package/dist/client/theme-api/live/LiveProvider.js

@@ -0,0 +1,74 @@
+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 { evalCode } from 'dumi';
+import React, { useMemo, useState } from 'react';
+import ReactDOM from 'react-dom/server';
+import { transform } from 'sucrase';
+import { useDemoScopes } from "./useDemoScopes";
+export var LiveContext = /*#__PURE__*/React.createContext({
+  enabled: false,
+  code: '',
+  onCodeChange: function onCodeChange() {},
+  demo: null,
+  error: ''
+});
+var transformCode = function transformCode(code, scopes) {
+  if (!scopes) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  var Comp = evalCode(transform(code, {
+    transforms: ['typescript', 'jsx']
+  }).code, scopes);
+  return /*#__PURE__*/React.createElement(Comp, null);
+};
+export var LiveProvider = function LiveProvider(_ref) {
+  var initialCode = _ref.initialCode,
+    demoId = _ref.demoId,
+    children = _ref.children;
+  var scopes = useDemoScopes(demoId);
+  var _useState = useState(initialCode),
+    _useState2 = _slicedToArray(_useState, 2),
+    code = _useState2[0],
+    setCode = _useState2[1];
+  var _useState3 = useState(function () {
+      return transformCode(code, scopes);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    demo = _useState4[0],
+    setDemo = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var onCodeChange = function onCodeChange(newCode) {
+    setCode(newCode);
+    try {
+      var liveDemo = transformCode(newCode, scopes);
+      ReactDOM.renderToString(liveDemo);
+      setDemo(liveDemo);
+      setError('');
+    } catch (e) {
+      setError(e.message);
+    }
+  };
+  var contextValue = useMemo(function () {
+    return {
+      error: error,
+      enabled: scopes !== null,
+      demo: demo,
+      code: code,
+      onCodeChange: onCodeChange
+    };
+  }, [code, scopes, demo, error]);
+  if (!scopes) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement(LiveContext.Provider, {
+    value: contextValue
+  }, children);
+};
+export default LiveProvider;

package/dist/client/theme-api/live/index.d.ts

@@ -0,0 +1,3 @@
+import LiveProvider, { LiveContext } from './LiveProvider';
+import { isLiveEnabled } from './useDemoScopes';
+export { LiveProvider, LiveContext, isLiveEnabled };

package/dist/client/theme-api/live/index.js

@@ -0,0 +1,3 @@
+import LiveProvider, { LiveContext } from "./LiveProvider";
+import { isLiveEnabled } from "./useDemoScopes";
+export { LiveProvider, LiveContext, isLiveEnabled };

package/dist/client/theme-api/live/useDemoScopes.d.ts

@@ -0,0 +1,2 @@
+export declare const useDemoScopes: (id: string) => any;
+export declare const isLiveEnabled: () => boolean;

package/dist/client/theme-api/live/useDemoScopes.js

@@ -0,0 +1,15 @@
+import { getDemoScopesById } from 'dumi';
+import use from "../context/use";
+var cache = new Map();
+export var useDemoScopes = function useDemoScopes(id) {
+  if (!getDemoScopesById) {
+    return null;
+  }
+  if (!cache.has(id)) {
+    cache.set(id, getDemoScopesById(id));
+  }
+  return use(cache.get(id));
+};
+export var isLiveEnabled = function isLiveEnabled() {
+  return !!getDemoScopesById;
+};

package/dist/client/theme-api/types.d.ts

@@ -41,6 +41,10 @@ export interface IPreviewerProps {
      * background color for demo content
      */
     background?: string;
+    /**
+     * enable live demo
+     */
+    live?: boolean;
     /**
      * asset metadata of current demo
      */

package/dist/features/compile/index.js

@@ -80,6 +80,12 @@ var compile_default = (api) => {
     }).end().end().oneOf("md-text").resourceQuery(/text$/).use("md-text-loader").loader(loaderPath).options({
       ...loaderBaseOpts,
       mode: "text"
+    }).end().end().oneOf("md-scope").resourceQuery(/scope$/).use("babel-loader").loader(babelInUmi.loader).options(babelInUmi.options).end().use("md-scope-loader").loader(loaderPath).options({
+      ...loaderBaseOpts,
+      mode: "scope"
+    }).end().end().oneOf("md-scope-index").resourceQuery(/scope-index$/).use("md-scope-index-loader").loader(loaderPath).options({
+      ...loaderBaseOpts,
+      mode: "scope-index"
     }).end().end().oneOf("md").use("babel-loader").loader(babelInUmi.loader).options(babelInUmi.options).end().use("md-loader").loader(loaderPath).options({
       ...loaderBaseOpts,
       builtins: api.service.themeData.builtins,

package/dist/features/exports.js

@@ -46,7 +46,8 @@ var exports_default = (api) => {
       content: `export * from '../exports';
 export * from '${(0, import_plugin_utils.winPath)(require.resolve("../client/theme-api"))}';
 export { getRouteMetaById } from './meta/route-meta';
-export { loadFilesMeta } from './meta/search';`
+export { loadFilesMeta } from './meta/search';
+export { getDemoScopesById } from './live/demo-scopes';`
     });
   });
 };

package/dist/features/live.d.ts

@@ -0,0 +1,3 @@
+import { IApi } from 'umi';
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/live.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/features/live.ts
+var live_exports = {};
+__export(live_exports, {
+  default: () => live_default
+});
+module.exports = __toCommonJS(live_exports);
+var import_constants = require("../constants");
+var import_tabs = require("./tabs");
+var import_path = require("path");
+var import_plugin_utils = require("umi/plugin-utils");
+var live_default = (api) => {
+  const mdFiles = [];
+  api.describe({
+    key: "live",
+    config: {
+      schema(joi) {
+        return joi.boolean();
+      }
+    },
+    enableBy: api.EnableBy.register
+  });
+  api.register({
+    key: "modifyRoutes",
+    // make sure it is called last
+    stage: Infinity,
+    fn: (routes) => {
+      mdFiles.length = 0;
+      Object.values(routes).forEach((route) => {
+        if (!route.isLayout && !/\*|:/.test(route.path) && route.file && !(0, import_tabs.isTabRouteFile)(route.file) && route.file.endsWith(".md")) {
+          mdFiles.push({
+            index: mdFiles.length,
+            file: (0, import_plugin_utils.winPath)(route.file),
+            id: route.id
+          });
+        }
+      });
+      return routes;
+    }
+  });
+  api.onGenerateFiles(async () => {
+    api.writeTmpFile({
+      noPluginDir: true,
+      path: "dumi/live/demo-scopes.ts",
+      tplPath: (0, import_plugin_utils.winPath)(
+        (0, import_path.join)(
+          import_constants.TEMPLATES_DIR,
+          "live",
+          !!api.config.live ? "demo-scopes.ts.tpl" : "disabled.ts.tpl"
+        )
+      ),
+      context: {
+        metaFiles: mdFiles
+      }
+    });
+  });
+};

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

@@ -21,6 +21,12 @@ interface IMdLoaderFrontmatterModeOptions extends Omit<IMdLoaderDefaultModeOptio
 interface IMdLoaderTextModeOptions extends Omit<IMdLoaderDefaultModeOptions, 'builtins' | 'mode'> {
     mode: 'text';
 }
-export type IMdLoaderOptions = IMdLoaderDefaultModeOptions | IMdLoaderDemosModeOptions | IMdLoaderDemoModeOptions | IMdLoaderFrontmatterModeOptions | IMdLoaderTextModeOptions | IMdLoaderDemoIndexModeOptions;
+interface IMdLoaderScopeModeOptions extends Omit<IMdLoaderDefaultModeOptions, 'builtins' | 'mode'> {
+    mode: 'scope';
+}
+interface IMdLoaderScopeIndexModeOptions extends Omit<IMdLoaderDefaultModeOptions, 'builtins' | 'mode'> {
+    mode: 'scope-index';
+}
+export type IMdLoaderOptions = IMdLoaderDefaultModeOptions | IMdLoaderDemosModeOptions | IMdLoaderDemoModeOptions | IMdLoaderFrontmatterModeOptions | IMdLoaderTextModeOptions | IMdLoaderDemoIndexModeOptions | IMdLoaderScopeModeOptions | IMdLoaderScopeIndexModeOptions;
 export default function mdLoader(this: any, content: string): void;
 export {};

package/dist/loaders/markdown/index.js

@@ -133,6 +133,97 @@ export const texts = {{{texts}}};`,
     }
   );
 }
+function emitScope(opts, ret) {
+  const { demos } = ret.meta;
+  const importReg = /import(?!(\stype)).*from.*;/g;
+  return import_plugin_utils.Mustache.render(
+    `{{#renderImport}}
+{{{.}}}
+{{/renderImport}}
+
+export const scopes = {
+{{#demos}}
+  '{{{id}}}': { {{{renderScope}}} },
+{{/demos}}
+}`,
+    {
+      demos,
+      renderImport: function renderImport() {
+        if (!demos)
+          return [];
+        const imports = {};
+        for (const demo of demos) {
+          if ("asset" in demo) {
+            const { asset } = demo;
+            Object.entries(asset.dependencies).forEach(([filename, file]) => {
+              if (filename.endsWith(".tsx")) {
+                const fileImports = file.value.match(importReg) || [];
+                fileImports.forEach((item) => {
+                  var _a;
+                  const scope = item.replace(/import(.*)from.*;/, "$1").trim();
+                  const dep = item.replace(/import.*from(.*);/, "$1").trim();
+                  const namedReg = /.*\{(.*)}/g;
+                  const namedScope = namedReg.test(scope) ? scope.replace(namedReg, "$1").split(",").map((item2) => item2.trim()).filter(Boolean) : [];
+                  const defaultReg = /(?:(?![,{]).)*/;
+                  const defaultScope = (_a = scope.match(defaultReg)) == null ? void 0 : _a[0].trim();
+                  imports[dep] ?? (imports[dep] = []);
+                  if (defaultScope) {
+                    const defaultImport = `default as ${defaultScope}`;
+                    if (!imports[dep].includes(defaultImport)) {
+                      imports[dep].push(defaultImport);
+                    }
+                  }
+                  if (namedScope.length) {
+                    for (const item2 of namedScope) {
+                      if (!imports[dep].includes(item2)) {
+                        imports[dep].push(item2);
+                      }
+                    }
+                  }
+                });
+              }
+            });
+          }
+        }
+        return Object.entries(imports).map(([key, value]) => {
+          return value.length ? `import { ${value.join(", ")} } from ${key};` : "";
+        }).filter(Boolean);
+      },
+      renderScope: function renderScope() {
+        if (!("asset" in this))
+          return "";
+        const { asset } = this;
+        const demoScopes = [];
+        Object.entries(asset.dependencies).forEach(([filename, file]) => {
+          if (filename.endsWith(".tsx")) {
+            const imports = file.value.match(importReg) || [];
+            const scopes = imports.reduce((acc, item) => {
+              const scope = item.replace(/import(.*)from.*;/, "$1").trim();
+              const scopeList = scope.replace(/[{}]/g, "").trim();
+              return [...acc, scopeList];
+            }, []);
+            demoScopes.push(...scopes);
+          }
+        });
+        return demoScopes.join(", ");
+      }
+    }
+  );
+}
+function emitScopeIndex(opts, ret) {
+  const { demos } = ret.meta;
+  return import_plugin_utils.Mustache.render(
+    `export const scopeIndex = {
+{{#demos}}
+  '{{{id}}}': {{{getter}}},
+{{/demos}}
+};`,
+    {
+      demos,
+      getter: `() => import('${(0, import_plugin_utils.winPath)(this.resourcePath)}?type=scope')`
+    }
+  );
+}
 function emit(opts, ret) {
   const { demos, embeds } = ret.meta;
   embeds.forEach((file) => this.addDependency(file));
@@ -146,6 +237,10 @@ function emit(opts, ret) {
       return emitFrontmatter.call(this, opts, ret);
     case "text":
       return emitText.call(this, opts, ret);
+    case "scope":
+      return emitScope.call(this, opts, ret);
+    case "scope-index":
+      return emitScopeIndex.call(this, opts, ret);
     default:
       return emitDefault.call(this, opts, ret);
   }

package/dist/preset.js

@@ -52,7 +52,8 @@ var preset_default = (api) => {
       require.resolve("./features/assets"),
       require.resolve("./features/exportStatic"),
       require.resolve("./features/sitemap"),
-      require.resolve("./features/html2sketch")
+      require.resolve("./features/html2sketch"),
+      require.resolve("./features/live")
     ]
   };
 };

package/dist/templates/live/demo-scopes.ts.tpl

@@ -0,0 +1,22 @@
+{{#metaFiles}}
+import { scopeIndex as scpi{{{index}}} } from '{{{file}}}?type=scope-index';
+{{/metaFiles}}
+
+const scopeIndexes: Record<string, { ids: string[], getter: () => Promise<any> }> = {
+  {{#metaFiles}}
+  ...scpi{{{index}}},
+  {{/metaFiles}}
+};
+
+/** Async to load demo by id */
+export const getDemoScopesById = async (id: string) => {
+  const getter = scopeIndexes[id];
+
+  if (!getter) {
+    return {};
+  }
+
+  const { scopes }: any = await getter() || {};
+
+  return scopes?.[id] || {};
+};

package/dist/templates/live/disabled.ts.tpl

@@ -0,0 +1 @@
+export const getDemoScopesById = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.3.0-alpha.7",
+  "version": "2.3.0-alpha.8",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -122,6 +122,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-error-boundary": "^4.0.10",
     "react-intl": "^6.4.4",
+    "react-simple-code-editor": "^0.13.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-remove-comments": "^5.0.0",
     "rehype-stringify": "^9.0.3",
@@ -132,6 +133,7 @@
     "remark-rehype": "^10.1.0",
     "sass": "^1.64.1",
     "sitemap": "^7.1.1",
+    "sucrase": "^3.34.0",
     "umi": "^4.0.84",
     "unified": "^10.1.2",
     "unist-util-visit": "^4.1.2",
@@ -150,8 +152,10 @@
     "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^18.17.1",
     "@types/pluralize": "^0.0.30",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.17",
     "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-dom": "^18.2.7",
     "@umijs/lint": "^4.0.84",
     "@umijs/plugins": "4.0.32",
     "dumi-theme-mobile": "workspace:*",
@@ -165,6 +169,7 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "prettier-plugin-packagejson": "^2.4.5",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "stylelint": "^15.10.2",
     "ts-node": "^10.9.1",
     "typescript": "~5.0.4",

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

@@ -1,16 +1,27 @@
+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; }
 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); }
 import classnames from 'classnames';
-import { useLocation } from 'dumi';
+import { LiveContext, LiveProvider, isLiveEnabled, useLocation } from 'dumi';
+import LiveDemo from 'dumi/theme/slots/LiveDemo';
+import LiveEditor from 'dumi/theme/slots/LiveEditor';
+import LiveError from 'dumi/theme/slots/LiveError';
 import PreviewerActions from 'dumi/theme/slots/PreviewerActions';
-import React, { useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import "./index.less";
-var Previewer = function Previewer(props) {
+var InternalPreviewer = function InternalPreviewer(props) {
   var _demoContainer$curren;
   var demoContainer = useRef(null);
   var _useLocation = useLocation(),
     hash = _useLocation.hash;
   var link = "#".concat(props.asset.id);
+  var _useContext = useContext(LiveContext),
+    enabled = _useContext.enabled;
   return /*#__PURE__*/React.createElement("div", {
     id: props.asset.id,
     className: classnames('dumi-default-previewer', props.className),
@@ -31,7 +42,7 @@ var Previewer = function Previewer(props) {
       height: Number(props.iframe)
     } : {},
     src: props.demoUrl
-  }) : props.children), /*#__PURE__*/React.createElement("div", {
+  }) : enabled ? /*#__PURE__*/React.createElement(LiveDemo, null) : props.children), /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-previewer-meta"
   }, (props.title || props.debug) && /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-previewer-desc"
@@ -43,7 +54,28 @@ var Previewer = function Previewer(props) {
       __html: props.description
     }
   })), /*#__PURE__*/React.createElement(PreviewerActions, _extends({}, props, {
-    demoContainer: props.iframe ? (_demoContainer$curren = demoContainer.current) === null || _demoContainer$curren === void 0 ? void 0 : _demoContainer$curren.firstElementChild : demoContainer.current
+    demoContainer: props.iframe ? (_demoContainer$curren = demoContainer.current) === null || _demoContainer$curren === void 0 ? void 0 : _demoContainer$curren.firstElementChild : demoContainer.current,
+    sourceCode: enabled ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LiveEditor, null), /*#__PURE__*/React.createElement(LiveError, null)) : null
   }))));
 };
+var Previewer = function Previewer(props) {
+  var children = /*#__PURE__*/React.createElement(InternalPreviewer, props);
+
+  // Only Single File
+  if (!isLiveEnabled() || props.live === false || Object.entries(props.asset.dependencies).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      type = _ref2[1].type;
+    return type === 'FILE';
+  }).length > 1) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement(LiveProvider, {
+    initialCode: Object.entries(props.asset.dependencies).filter(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        type = _ref4[1].type;
+      return type === 'FILE';
+    })[0][1].value,
+    demoId: props.asset.id
+  }, children);
+};
 export default Previewer;

package/theme-default/slots/LiveDemo/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const LiveDemo: FC;
+export default LiveDemo;

package/theme-default/slots/LiveDemo/index.js

@@ -0,0 +1,8 @@
+import { LiveContext } from 'dumi';
+import React, { useContext } from 'react';
+var LiveDemo = function LiveDemo() {
+  var _useContext = useContext(LiveContext),
+    demo = _useContext.demo;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, demo);
+};
+export default LiveDemo;

package/theme-default/slots/LiveEditor/index.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, FC } from 'react';
+import Editor from 'react-simple-code-editor';
+declare const LiveEditor: FC<ComponentProps<typeof Editor>>;
+export default LiveEditor;

package/theme-default/slots/LiveEditor/index.js

@@ -0,0 +1,20 @@
+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); }
+import { LiveContext } from 'dumi';
+import { highlight, languages } from 'prismjs';
+import React, { useContext } from 'react';
+import Editor from 'react-simple-code-editor';
+var LiveEditor = function LiveEditor(props) {
+  var _props$highlight, _props$padding;
+  var _useContext = useContext(LiveContext),
+    code = _useContext.code,
+    onCodeChange = _useContext.onCodeChange;
+  return /*#__PURE__*/React.createElement(Editor, _extends({}, props, {
+    value: code,
+    onValueChange: onCodeChange,
+    highlight: (_props$highlight = props.highlight) !== null && _props$highlight !== void 0 ? _props$highlight : function (code) {
+      return highlight(code, languages.js, 'tsx');
+    },
+    padding: (_props$padding = props.padding) !== null && _props$padding !== void 0 ? _props$padding : 20
+  }));
+};
+export default LiveEditor;

package/theme-default/slots/LiveError/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import './index.less';
+declare const LiveError: FC;
+export default LiveError;

package/theme-default/slots/LiveError/index.js

@@ -0,0 +1,15 @@
+import { ReactComponent as IconError } from '@ant-design/icons-svg/inline-svg/filled/close-circle.svg';
+import { LiveContext } from 'dumi';
+import React, { useContext } from 'react';
+import "./index.less";
+var LiveError = function LiveError() {
+  var _useContext = useContext(LiveContext),
+    error = _useContext.error;
+  if (!error) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("pre", {
+    className: 'dumi-default-live-error'
+  }, /*#__PURE__*/React.createElement(IconError, null), error);
+};
+export default LiveError;

package/theme-default/slots/LiveError/index.less

@@ -0,0 +1,22 @@
+@import (reference) '../../styles/variables.less';
+
+.dumi-default-live-error {
+  @color: darken(desaturate(@c-error, 20%), 1%);
+
+  white-space: break-spaces;
+  background: lighten(@c-error, 51%);
+  color: @color;
+  padding: 12px 20px;
+  margin: 0;
+  border-radius: 0 0 4px 4px;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  line-height: 16px;
+
+  > svg {
+    fill: currentcolor;
+    width: 16px;
+    flex: none;
+  }
+}

package/theme-default/slots/PreviewerActions/index.d.ts

@@ -9,6 +9,7 @@ export interface IPreviewerActionsProps extends IPreviewerProps {
     extra?: ReactNode;
     forceShowCode?: boolean;
     demoContainer: HTMLDivElement | HTMLIFrameElement;
+    sourceCode?: ReactNode;
 }
 declare const PreviewerActions: FC<IPreviewerActionsProps>;
 export default PreviewerActions;

package/theme-default/slots/PreviewerActions/index.js

@@ -168,7 +168,7 @@ var PreviewerActions = function PreviewerActions(props) {
         label: filename
       };
     })
-  })), /*#__PURE__*/React.createElement(SourceCode, {
+  })), props.sourceCode || /*#__PURE__*/React.createElement(SourceCode, {
     lang: lang
   }, files[activeKey][1].value)));
 };