@antv/dumi-theme-antv 0.3.0-beta.1 → 0.3.0-beta.11

package/dist/plugin/index.js

@@ -25,44 +25,52 @@ __export(plugin_exports, {
   default: () => plugin_default
 });
 module.exports = __toCommonJS(plugin_exports);
+var path = __toESM(require("path"));
 var import_examples = require("./examples");
-function generateMetaJSON() {
-  const res = (0, import_examples.getExamplesPageTopics)();
-  return {
-    exampleTopics: res
-  };
-}
+var import_utils = require("./utils");
 var plugin_default = (api) => {
   api.describe({ key: `dumi-theme:${require("../../package.json").name}` });
+  api.modifyDefaultConfig((memo) => {
+    memo.resolve.codeBlockMode = "passive";
+    memo.exportStatic.extraRoutePaths = (0, import_examples.getExamplePaths)();
+    memo.mfsu = false;
+    memo.favicons = ["https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7svFR6wkPMoAAAAAAAAAAAAADmJ7AQ/original"];
+    return memo;
+  });
   const pages = [
+    {
+      id: "dumi-theme-antv-homepage",
+      absPath: "/"
+    },
     {
       id: "dumi-theme-antv-example-list-zh",
-      path: "/examples/",
-      file: require.resolve("../pages/Examples/index.tsx")
+      absPath: "/examples",
+      file: (0, import_utils.myResolve)("../pages/Examples/index.tsx")
     },
     {
       id: "dumi-theme-antv-example-list-lang",
-      path: "/:language/examples/",
-      file: require.resolve("../pages/Examples/index.tsx")
+      absPath: "/:language/examples",
+      file: (0, import_utils.myResolve)("../pages/Examples/index.tsx")
     },
     {
       id: "dumi-theme-antv-single-example-zh",
-      path: "/examples/:topic/:example",
-      file: require.resolve("../pages/Example/index.tsx")
+      absPath: "/examples/:topic/:example",
+      file: (0, import_utils.myResolve)("../pages/Example/index.tsx")
     },
     {
       id: "dumi-theme-antv-single-example-lang",
-      path: "/:language/examples/:topic/:example",
-      file: require.resolve("../pages/Example/index.tsx")
+      absPath: "/:language/examples/:topic/:example",
+      file: (0, import_utils.myResolve)("../pages/Example/index.tsx")
     }
   ];
-  const contextFilePath = require.resolve("../context.ts");
+  const contextFilePath = (0, import_utils.myResolve)("../context.ts");
   api.onGenerateFiles(() => {
     api.writeTmpFile({
       noPluginDir: true,
       path: "theme-antv/ContextWrapper.tsx",
       content: `
-import { useOutlet } from 'dumi';
+import React from 'react';
+import { useOutlet, useSiteData } from 'dumi';
 import { ThemeAntVContext } from '${contextFilePath}';
 
 export default function ThemeAntVContextWrapper() {
@@ -71,7 +79,9 @@ export default function ThemeAntVContextWrapper() {
   return (
     <ThemeAntVContext.Provider
       value={{
-        meta: ${JSON.stringify(generateMetaJSON())}
+        meta: ${JSON.stringify({
+        exampleTopics: (0, import_examples.getExamplesPageTopics)(api.config.themeConfig.examples || [])
+      })}
       }}
     >
       {outlet}
@@ -89,15 +99,16 @@ export default function ThemeAntVContextWrapper() {
     pages.forEach((page) => {
       routes[page.id] = {
         id: page.id,
-        path: page.path,
-        absPath: page.path,
+        path: page.absPath.slice(1),
+        absPath: page.absPath,
         file: page.file,
         parentId: "DocLayout"
       };
     });
-    routes["404"].file = require.resolve("../pages/404.tsx");
+    routes["404"].file = (0, import_utils.myResolve)("../pages/404.tsx");
     return routes;
   });
+  api.addTmpGenerateWatcherPaths(() => [path.resolve(process.cwd(), "examples")]);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/dist/plugin/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 自定义的 resolve 函数，优先找 tsx，如果找不到则找对应的 js 文件。
+ * 因为 dumi-theme-antv 编译之后，全部变成 js 文件
+ */
+export declare function myResolve(p: string, alternateExts?: string[]): string;

package/dist/plugin/utils.js

@@ -0,0 +1,46 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/plugin/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  myResolve: () => myResolve
+});
+module.exports = __toCommonJS(utils_exports);
+var path = __toESM(require("path"));
+function myResolve(p, alternateExts = [".js"]) {
+  const extname2 = path.extname(p);
+  const pathname = p.slice(0, p.length - extname2.length);
+  const exts = [extname2, ...alternateExts];
+  for (let i = 0; i < exts.length; i++) {
+    const ext = exts[i];
+    const fullpath = `${pathname}${ext}`;
+    try {
+      return require.resolve(fullpath);
+    } catch (e) {
+    }
+  }
+  return "";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  myResolve
+});

package/dist/slots/Cases/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
+import { IC } from '../../types';
 interface Case {
     logo?: string;
     isAppLogo?: boolean;

package/dist/slots/Cases/index.js

@@ -76,7 +76,7 @@ export var Cases = function Cases(_ref) {
         className: styles.appWrapper,
         key: ic(app.title)
       }, /*#__PURE__*/React.createElement("img", {
-        className: styles.appTeaser,
+        className: cx(styles.appTeaser, 'index-cases-image'),
         src: app.image,
         alt: ic(app.title)
       }), /*#__PURE__*/React.createElement("div", {

package/dist/slots/Cases/index.module.less

@@ -18,7 +18,8 @@
     width: 83.88%;
     height: 100%;
     overflow-y: hidden;
-    display: flex;
+    display: flex !important;
+    align-items: center;
 
     .appLeft {
       margin-left: 3.06%;

package/dist/slots/CodeEditor/Toolbar.js

@@ -19,7 +19,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 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 React, { useEffect, useState } from 'react';
-import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { Typography, Tooltip } from 'antd';
 import { useLocale } from 'dumi';
 import { getParameters } from 'codesandbox/lib/api/define';
@@ -68,8 +68,8 @@ export var Toolbar = function Toolbar(_ref) {
       updateRiddleVisible = _useState2[1];
 
   useEffect(function () {
-    ping(function (status) {
-      updateRiddleVisible(status === 'responded');
+    ping().then(function (status) {
+      return updateRiddleVisible(status === 'responded');
     });
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -129,19 +129,7 @@ export var Toolbar = function Toolbar(_ref) {
     style: {
       marginLeft: 6
     }
-  }), onToggleFullscreen ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: isFullScreen ? useT('离开全屏') : useT('进入全屏')
-  }, isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, {
-    onClick: onToggleFullscreen,
-    style: {
-      marginLeft: 12
-    }
-  }) : /*#__PURE__*/React.createElement(FullscreenOutlined, {
-    onClick: onToggleFullscreen,
-    style: {
-      marginLeft: 12
-    }
-  })) : null, /*#__PURE__*/React.createElement(Tooltip, {
+  }), /*#__PURE__*/React.createElement(Tooltip, {
     title: useT('执行代码')
   }, /*#__PURE__*/React.createElement(PlayCircleOutlined, {
     onClick: onExecuteCode,

package/dist/slots/CodeEditor/index.d.ts

@@ -4,6 +4,10 @@ export declare type CodeEditorProps = {
      * 标题
      */
     title?: string;
+    /**
+     * 示例的 id
+     */
+    exampleId: string;
     /**
      * 输入的源码
      */

package/dist/slots/CodeEditor/index.js

@@ -14,8 +14,10 @@ import React, { useRef, useState, useCallback, useEffect } from 'react';
 import MonacoEditor, { loader } from '@monaco-editor/react';
 import { useSiteData, useLocale } from 'dumi';
 import { debounce, noop } from 'lodash-es';
+import { bind, clear } from 'size-sensor';
 import { replaceInsertCss, execute, compile } from "./utils";
 import { Toolbar, EDITOR_TABS } from "./Toolbar";
+import { Loading } from "../Loading";
 import styles from "./index.module.less";
 loader.config({
   'vs/nls': {
@@ -41,6 +43,7 @@ export var CodeEditor = function CodeEditor(_ref) {
       _ref$replaceId = _ref.replaceId,
       replaceId = _ref$replaceId === void 0 ? 'container' : _ref$replaceId,
       isFullscreen = _ref.isFullscreen,
+      exampleId = _ref.exampleId,
       _ref$onReady = _ref.onReady,
       onReady = _ref$onReady === void 0 ? noop : _ref$onReady,
       _ref$onDestroy = _ref.onDestroy,
@@ -77,43 +80,58 @@ export var CodeEditor = function CodeEditor(_ref) {
   var _useState7 = useState(EDITOR_TABS.JAVASCRIPT),
       _useState8 = _slicedToArray(_useState7, 2),
       currentEditorTab = _useState8[0],
-      setCurrentEditorTab = _useState8[1]; // 出发 auto resize
+      setCurrentEditorTab = _useState8[1];
 
+  var containerId = "playgroundScriptContainer_".concat(exampleId); // 出发 auto resize
 
   var dispatchResizeEvent = function dispatchResizeEvent() {
     var e = new Event('resize');
     window.dispatchEvent(e);
   };
 
+  var reportError = useCallback(function (e) {
+    if (e) {
+      console.log(e);
+      onError(e);
+      e.preventDefault && e.preventDefault();
+    } else {
+      onError(null);
+    }
+  }, []);
   useEffect(function () {
     // 用于上报错误信息，使用 script 执行代码
     if (typeof window !== 'undefined') {
-      window.__reportErrorInPlayground = function (e) {
-        if (e) {
-          console.error(e);
-          onError(e);
-        }
-      };
+      // Cath error of code.
+      window.__reportErrorInPlayground = reportError; // Catch error of timeout/raf.
+
+      window.onerror = reportError; // Catch error of  promise.
+
+      window.addEventListener('unhandledrejection', reportError);
     }
-  });
+
+    return function () {
+      if (window) {
+        window.__reportErrorInPlayground = undefined;
+        window.onerror = undefined;
+        window.removeEventListener('unhandledrejection', reportError);
+      }
+    };
+  }, []);
   var executeCode = useCallback(debounce(function (v) {
     if (!v) return; // 1. 先编译代码
 
     var compiled;
 
     try {
-      compiled = compile(replaceInsertCss(v, locale.id), relativePath); // 清除错误
-
-      onError(null);
+      compiled = compile(replaceInsertCss(v, locale.id), relativePath);
     } catch (e) {
-      console.error(e);
-      onError(e); // 执行出错，后面的步骤不用做了！
+      reportError(e); // 执行出错，后面的步骤不用做了！
 
       return;
     } // 2. 执行代码，try catch 在内部已经做了
 
 
-    execute(compiled, 'playgroundScriptContainer', playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
+    execute(compiled, containerId, playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
   }, 300), []);
   useEffect(function () {
     setCode(source);
@@ -122,6 +140,14 @@ export var CodeEditor = function CodeEditor(_ref) {
     executeCode(code);
   }, [code]);
   useEffect(function () {
+    var dom = document.getElementById('containerId');
+
+    if (dom) {
+      bind(dom, debounce(function () {
+        dispatchResizeEvent();
+      }, 100));
+    }
+
     onReady();
 
     if (playground !== null && playground !== void 0 && playground.playgroundDidMount) {
@@ -129,6 +155,7 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
 
     return function () {
+      dom && clear(dom);
       onDestroy();
 
       if (playground !== null && playground !== void 0 && playground.playgroundWillUnmount) {
@@ -149,6 +176,11 @@ export var CodeEditor = function CodeEditor(_ref) {
       });
     }
   }, []);
+  useEffect(function () {
+    if (monacoRef.current) {
+      monacoRef.current.setValue(currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2));
+    }
+  }, [currentEditorTab]);
   var onCodeChange = useCallback(function (value) {
     if (currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
       setCode(value);
@@ -177,9 +209,9 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MonacoEditor, {
     language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json',
-    value: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2),
+    value: code,
     path: relativePath,
-    loading: "Loading...",
+    loading: /*#__PURE__*/React.createElement(Loading, null),
     options: {
       readOnly: currentEditorTab === EDITOR_TABS.DATA,
       automaticLayout: true,

package/dist/slots/CodeEditor/utils.js

@@ -135,9 +135,9 @@ export function execute(code, playgroundScriptContainer, container) {
   var script = document.createElement('script'); // replace container id in case of multi demos in document
 
   var newCode = code.replace(/'container'|"container"/, "'".concat(replaceId, "'"));
-  script.innerHTML = "\n// Can only have one anonymous define call per script file\n// \u548C monaco loader \u52A0\u8F7D\u51B2\u7A81\nvar __runnerDefine = window['define'];\nwindow['define'] = null;\ntry {\n  ".concat(newCode, "\n\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(null);\n} catch(e) {\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(e);\n} finally {\n  window['define'] = __runnerDefine;\n}\n  "); // 追加图表容器
+  script.innerHTML = "\n// Can only have one anonymous define call per script file\n// \u548C monaco loader \u52A0\u8F7D\u51B2\u7A81\nvar __runnerDefine = window['define'];\nwindow['define'] = null;\ntry {\n  ".concat(newCode, "\n\n  // \u6E05\u9664\u663E\u793A\u7684\u9519\u8BEF\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(null);\n} catch(e) {\n  window.__reportErrorInPlayground && window.__reportErrorInPlayground(e);\n} finally {\n  window['define'] = __runnerDefine;\n}\n  "); // 追加图表容器
 
-  node.innerHTML = container || "<div id=".concat(replaceId, " />"); // 运行 script
+  node.innerHTML = container || "<div id=".concat(replaceId, " class=\"playgroundCodeContainer\" />"); // 运行 script
 
   node.appendChild(script);
 }

package/dist/slots/CodePreview/CodeHeader.js

@@ -1,9 +1,5 @@
 import React from 'react';
-import { PageHeader, Tooltip, Space, Divider } from 'antd';
-import { EditOutlined } from '@ant-design/icons';
-import { useT } from "../hooks";
-import { getGithubSourceUrl } from "../utils";
-import styles from "./CodeHeader.module.less";
+import { PageHeader, Space, Divider } from 'antd';
 
 /**
  * 组件的 header
@@ -14,15 +10,20 @@ export var CodeHeader = function CodeHeader(_ref) {
       githubUrl = _ref.githubUrl;
   return /*#__PURE__*/React.createElement(PageHeader, {
     ghost: false,
-    title: title,
-    subTitle: /*#__PURE__*/React.createElement(Tooltip, {
-      title: useT('在 GitHub 上编辑')
-    }, /*#__PURE__*/React.createElement("a", {
-      href: getGithubSourceUrl(githubUrl, relativePath, 'examples'),
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: styles.editOnGtiHubButton
-    }, /*#__PURE__*/React.createElement(EditOutlined, null))),
+    title: title // todo 编辑地址各种各样，需要有单独的配置，暂时关闭！
+    // subTitle={
+    //   <Tooltip title={useT('在 GitHub 上编辑')}>
+    //     <a
+    //       href={getGithubSourceURL(githubUrl, relativePath, 'examples')}
+    //       target="_blank"
+    //       rel="noopener noreferrer"
+    //       className={styles.editOnGtiHubButton}
+    //     >
+    //       <EditOutlined />
+    //     </a>
+    //   </Tooltip>
+    // }
+    ,
     extra: /*#__PURE__*/React.createElement(Space, {
       split: /*#__PURE__*/React.createElement(Divider, {
         type: "vertical"

package/dist/slots/CodePreview/index.d.ts

@@ -1,5 +1,13 @@
 import React from 'react';
 export declare type CodePreviewProps = {
+    /**
+     * 在文档中预览
+     */
+    isPlayground: boolean;
+    /**
+     * id
+     */
+    exampleId: string;
     /**
      * 预览页面头部组件，用于显示 demo 名称，一些操作栏等
      */

package/dist/slots/CodePreview/index.js

@@ -9,21 +9,23 @@ import styles from "./index.module.less";
  * 2. 错误预览
  */
 export var CodePreview = function CodePreview(_ref) {
-  var header = _ref.header,
+  var isPlayground = _ref.isPlayground,
+      exampleId = _ref.exampleId,
+      header = _ref.header,
       error = _ref.error;
   return /*#__PURE__*/React.createElement("div", {
     className: styles.preview
-  }, /*#__PURE__*/React.createElement("div", {
+  }, isPlayground ? null : /*#__PURE__*/React.createElement("div", {
     className: styles.header
   }, header), /*#__PURE__*/React.createElement("div", {
     className: styles.content
   }, /*#__PURE__*/React.createElement("div", {
-    id: "playgroundScriptContainer",
+    id: "playgroundScriptContainer_".concat(exampleId),
     className: styles.playgroundScriptContainer
   }), error ? /*#__PURE__*/React.createElement(Result, {
     className: styles.result,
     status: "error",
     title: useT('演示代码报错，请检查'),
-    subTitle: /*#__PURE__*/React.createElement("pre", null, error && error.message)
+    subTitle: /*#__PURE__*/React.createElement("pre", null, error && error.toString())
   }) : null));
 };

package/dist/slots/CodePreview/index.module.less

@@ -3,28 +3,38 @@
   height: 100%;
   position: relative;
 
-  padding: 16px;
+  padding: 24px;
   overflow: auto;
 
   display: flex;
   flex-direction: column;
 
   .header {
-    flex: 0
+    :global(.ant-page-header) {
+      padding-left: 0;
+    }
   }
 
   .content {
-    width: 100%;
-    height: 100%;
     position: relative;
+    flex: 1;
+    min-height: 0;
   
-    .playgroundScriptContainer {
-      flex: 1;
+    .playgroundScriptContainer, .playgroundCodeContainer {
       position: relative;
-      :global(#container) {
+      width: 100%;
+      height: 100%;
+
+      :global(.playgroundCodeContainer) {
+        position: relative;
         width: 100%;
         height: 100%;
+      }
+
+      :global(#container) {
         position: relative;
+        width: 100%;
+        height: 100%;
       }
     }
 

package/dist/slots/CodeRunner/index.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
-import { ExamplesPage } from '../../typings';
+import { ExampleTopic } from '../../types';
 declare type CodeRunnerProps = {
+    isPlayground?: boolean;
     topic: string;
     example: string;
     demo: string;
-    exampleTopics: ExamplesPage.ExampleTopic[];
+    exampleTopics: ExampleTopic[];
+    size?: number;
+    replaceId?: string;
     notFound?: React.Element;
 };
 /**

package/dist/slots/CodeRunner/index.js

@@ -28,6 +28,9 @@ export var CodeRunner = function CodeRunner(_ref) {
       topic = _ref.topic,
       example = _ref.example,
       demo = _ref.demo,
+      size = _ref.size,
+      replaceId = _ref.replaceId,
+      isPlayground = _ref.isPlayground,
       _ref$notFound = _ref.notFound,
       notFound = _ref$notFound === void 0 ? /*#__PURE__*/React.createElement(NotFound, null) : _ref$notFound;
   var demoInfo = getDemoInfo(exampleTopics, topic, example, demo); // 找不到，啥也别干了，404 页面
@@ -40,7 +43,8 @@ export var CodeRunner = function CodeRunner(_ref) {
   var _useSiteData = useSiteData(),
       themeConfig = _useSiteData.themeConfig;
 
-  var githubUrl = themeConfig.githubUrl;
+  var githubUrl = themeConfig.githubUrl,
+      playground = themeConfig.playground;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -58,19 +62,29 @@ export var CodeRunner = function CodeRunner(_ref) {
     relativePath: relativePath,
     githubUrl: githubUrl
   });
+
+  function getExampleId() {
+    return "".concat(topic, "_").concat(example, "_").concat(demo);
+  }
+
   return /*#__PURE__*/React.createElement(SplitPane, {
     split: "vertical",
-    defaultSize: "50%",
+    defaultSize: "".concat((1 - size) * 100, "%"),
     minSize: 100
   }, /*#__PURE__*/React.createElement(CodePreview, {
+    exampleId: getExampleId(),
     error: error,
-    header: header
+    header: header,
+    isPlayground: isPlayground
   }), /*#__PURE__*/React.createElement(CodeEditor, {
+    exampleId: getExampleId(),
     source: source,
     relativePath: relativePath,
+    replaceId: replaceId,
     onError: setError,
     onFullscreen: setFullscreen,
     onDestroy: noop,
-    onReady: noop
+    onReady: noop,
+    playground: playground
   }));
 };

package/dist/slots/CodeRunner/utils.d.ts

@@ -1,10 +1,11 @@
+import { Demo, ExampleTopic } from '../../types';
 /**
  * 将数据结构转化成 map，便于后续检索的速度
  * @param exampleTopics
  * @returns
  */
-export declare function getExampleTopicMap(exampleTopics: ExamplesPage.ExampleTopic[]): Map<string, ExamplesPage.Demo>;
+export declare function getExampleTopicMap(exampleTopics: ExampleTopic[]): Map<string, Demo>;
 /**
  * 从 Context 信息中，获取到 Example 相关的信息，用于页面渲染
  */
-export declare function getDemoInfo(exampleTopics: ExamplesPage.ExampleTopic[], topic: string, example: string, demo: string): ExamplesPage.Demo | undefined;
+export declare function getDemoInfo(exampleTopics: ExampleTopic[], topic: string, example: string, demo: string): Demo;

package/dist/slots/CodeRunner/utils.js

@@ -5,12 +5,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import { map } from 'lodash-es';
+
 /**
  * 将数据结构转化成 map，便于后续检索的速度
  * @param exampleTopics
  * @returns
  */
-
 export function getExampleTopicMap(exampleTopics) {
   var exampleTopicMap = new Map();
   map(exampleTopics, function (topic) {

package/dist/slots/Detail/News.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IC } from '../../types';
 export interface NewsProps {
     index?: number;
     type: IC;

package/dist/slots/Detail/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IC } from '../../types';
 import { NewsProps } from './News';
 declare type DetailButtonProps = {
     text: IC;

package/dist/slots/Detail/index.js

@@ -81,7 +81,7 @@ export var Detail = function Detail(_ref) {
         link = _ref2.link,
         shape = _ref2.shape;
     return /*#__PURE__*/React.createElement("a", {
-      key: text,
+      key: ic(text),
       className: cx(styles.buttonLink, styles[type || ''], type === 'primary' ? 'primary-button' : 'common-button'),
       style: _objectSpread({
         borderRadius: shape === 'square' ? '4px' : '1000px'