@antv/dumi-theme-antv 0.3.0-beta.2 → 0.3.0-beta.21

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 "dumi/theme/slots/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,50 +80,82 @@ 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 (currentEditorTab !== EDITOR_TABS.JAVASCRIPT) return;
     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);
-  }, 300), []);
+    execute(compiled, containerId, playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
+  }, 300), [exampleId, currentEditorTab]); // 案例变化的时候，修改期待吗
+
   useEffect(function () {
     setCode(source);
-  }, [source]);
+  }, [exampleId]); // 代码变化的时候，运行代码
+
   useEffect(function () {
     executeCode(code);
   }, [code]);
+  useEffect(function () {
+    var dom = document.getElementById(containerId);
+
+    if (dom) {
+      bind(dom, debounce(function () {
+        dispatchResizeEvent();
+      }, 100));
+    }
+
+    return function () {
+      dom && clear(dom);
+    };
+  }, []); // 生命周期
+
   useEffect(function () {
     onReady();
 
@@ -147,13 +182,25 @@ export var CodeEditor = function CodeEditor(_ref) {
         setEditorTabs([EDITOR_TABS.JAVASCRIPT, EDITOR_TABS.DATA]);
         setData(data);
       });
+    } else {
+      setEditorTabs([EDITOR_TABS.JAVASCRIPT]);
     }
-  }, []);
-  var onCodeChange = useCallback(function (value) {
-    if (currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
+  }, [exampleId]); // 切换 tab
+
+  var onTabChange = useCallback(function (tab) {
+    setCurrentEditorTab(tab);
+  }, [exampleId]); // useEffect(() => {
+  //   if (monacoRef.current) {
+  //     const v = currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2);
+  //     monacoRef.current.setValue(v);
+  //   }
+  // }, [currentEditorTab]);
+
+  var onCodeChange = useCallback(function (value, event) {
+    if (!event.isFlush && currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
       setCode(value);
     }
-  }, []);
+  }, [currentEditorTab]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.editor
   }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -168,7 +215,7 @@ export var CodeEditor = function CodeEditor(_ref) {
     onExecuteCode: function onExecuteCode() {
       return executeCode(code);
     },
-    onEditorTabChange: setCurrentEditorTab,
+    onEditorTabChange: onTabChange,
     onToggleFullscreen: onFullscreen
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.monaco,
@@ -177,9 +224,10 @@ 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: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2) // defaultValue={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={<FormattedMessage id="在 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

@@ -1,29 +1,38 @@
 import React from 'react';
 import { Result } from 'antd';
-import { useT } from "../hooks";
+import { FormattedMessage } from 'dumi';
 import styles from "./index.module.less";
 
+function getErrorMessage(e) {
+  return (e.reason ? e.reason : e.message ? e.message : e).toString();
+}
 /**
  * DEMO 预览页面的预览，主要包含有：
  * 1. 一些 header 菜单
  * 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)
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "\u6F14\u793A\u4EE3\u7801\u62A5\u9519\uFF0C\u8BF7\u68C0\u67E5"
+    }),
+    subTitle: /*#__PURE__*/React.createElement("pre", null, getErrorMessage(error))
   }) : 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

@@ -14,11 +14,12 @@ import React, { useState } from 'react';
 import { useSiteData, useLocale } from 'dumi';
 import { noop } from 'lodash-es';
 import SplitPane from 'react-split-pane';
-import { CodeEditor } from "../CodeEditor";
-import { CodePreview } from "../CodePreview";
+import { CodeEditor } from "dumi/theme/slots/CodeEditor";
+import { CodePreview } from "dumi/theme/slots/CodePreview";
 import { CodeHeader } from "../CodePreview/CodeHeader";
 import { getDemoInfo } from "./utils";
-import { NotFound } from "../404";
+import { NotFound } from "dumi/theme/slots/404";
+import { ic } from "../hooks";
 
 /**
  * 代码编辑器 + 代码预览区域
@@ -28,6 +29,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 +44,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),
@@ -54,23 +59,29 @@ export var CodeRunner = function CodeRunner(_ref) {
 
   var locale = useLocale();
   var header = /*#__PURE__*/React.createElement(CodeHeader, {
-    title: title[locale.id],
+    title: ic(title),
     relativePath: relativePath,
     githubUrl: githubUrl
   });
+  var exampleId = "".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: exampleId,
     error: error,
-    header: header
+    header: header,
+    isPlayground: isPlayground
   }), /*#__PURE__*/React.createElement(CodeEditor, {
+    exampleId: exampleId,
     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/Companies/index.d.ts

@@ -4,7 +4,7 @@ declare type Company = {
     img: string;
 };
 interface CompaniesProps {
-    title: string;
+    title: any;
     companies: Company[];
     className?: string;
     style?: React.CSSProperties;

package/dist/slots/{TOC.d.ts → ContentTable/index.d.ts}

@@ -1,5 +1,6 @@
 import React from 'react';
+import './index.module.less';
 /**
  * 文档右侧的指示器（table of content）
  */
-export declare const TOC: React.FC<{}>;
+export declare const ContentTable: React.FC<{}>;

package/dist/slots/{TOC.js → ContentTable/index.js}

@@ -1,6 +1,7 @@
 import Toc from 'dumi/theme-default/slots/Toc';
+import "./index.module.less";
 /**
  * 文档右侧的指示器（table of content）
  */
 
-export var TOC = Toc;
+export var ContentTable = Toc;

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

@@ -0,0 +1,11 @@
+:global {
+  ul.dumi-default-toc {
+    >li {
+      margin-left: 0px!important;
+    }
+    .active {
+      color: #873bf4!important;
+      border-left: 3px solid #873bf4!important;
+    }
+  }
+}

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/News.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'dumi';
+import { Link, useLocale } from 'dumi';
 import { ic } from "../hooks";
 import styles from "./News.module.less";
 var numberImages = ['https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png', 'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png'];
@@ -11,6 +11,7 @@ export var News = function News(_ref) {
       date = _ref.date,
       _ref$link = _ref.link,
       link = _ref$link === void 0 ? '' : _ref$link;
+  var lang = useLocale().id;
   var children = /*#__PURE__*/React.createElement("div", {
     className: styles.container
   }, /*#__PURE__*/React.createElement("img", {
@@ -35,7 +36,7 @@ export var News = function News(_ref) {
   }
 
   return /*#__PURE__*/React.createElement(Link, {
-    to: link,
+    to: link[lang] ? link[lang] : link,
     className: styles.news
   }, children);
 };

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

@@ -22,6 +22,7 @@ import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import gh from 'parse-github-url';
 import GitHubButton from 'react-github-button';
+import { useLocale } from 'dumi/dist/client/theme-api';
 import { ic } from "../hooks";
 import { News } from "./News";
 import styles from "./index.module.less";
@@ -50,6 +51,7 @@ export var Detail = function Detail(_ref) {
       removeNews = _useState2[0],
       setRemoteNews = _useState2[1];
 
+  var lang = useLocale().id;
   useEffect(function () {
     fetch(AssetsNewsURL).then(function (res) {
       return res.json();
@@ -81,12 +83,12 @@ 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'
       }, style),
-      href: link
+      href: link[lang] ? link[lang] : link
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.button
     }, ic(text)));

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

@@ -1,52 +1,18 @@
 import React from 'react';
-export interface PlayGroundItemProps {
-    source: string;
-    examples: PlayGroundItemProps[];
-    babeledSource: string;
-    absolutePath?: string;
-    relativePath?: string;
-    screenshot?: string;
-    recommended?: boolean;
-    filename: string;
-    title?: string;
-    location?: Location;
-    playground?: {
-        container?: string;
-        playgroundDidMount?: string;
-        playgroundWillUnmount?: string;
-        dependencies?: {
-            [key: string]: string;
-        };
-        devDependencies?: {
-            [key: string]: string;
-        };
-        htmlCodeTemplate?: string;
-    };
-}
-export interface TreeItem {
-    title?: string;
-    value?: string;
-    key?: string;
-    children?: any;
-    icon?: string;
-    relativePath?: string;
-    filename?: string;
-    screenshot?: string;
-    node?: any;
-}
+import { Demo, ExampleTopic } from '../../types';
 export interface ExampleSiderProps {
     /**
      * 当前 Example (受控)
      */
-    currentDemo: ExamplesPage.Demo;
+    currentDemo: Demo;
     /**
      * 当选中的 Demo 被改变时做些什么
      */
-    onDemoClicked: (demo: ExamplesPage.Demo) => void;
+    onDemoClicked: (demo: Demo) => void;
     /**
      * 所有的案例主题
      */
-    exampleTopics: ExamplesPage.ExampleTopic[];
+    exampleTopics: ExampleTopic[];
     showExampleDemoTitle: boolean;
 }
 /**