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

package/dist/slots/CodeEditor/Toolbar.js

@@ -0,0 +1,152 @@
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
+
+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 { Typography, Tooltip } from 'antd';
+import { useLocale } from 'dumi';
+import { getParameters } from 'codesandbox/lib/api/define';
+import stackblitzSdk from '@stackblitz/sdk';
+import { ping } from "../utils";
+import { extractImportDeps, getCodeSandboxConfig, getStackblitzConfig, getRiddleConfig } from "./utils";
+import { useT } from "../hooks";
+import styles from "./Toolbar.module.less";
+var Paragraph = Typography.Paragraph;
+export var EDITOR_TABS;
+
+(function (EDITOR_TABS) {
+  EDITOR_TABS["JAVASCRIPT"] = "JavaScript";
+  EDITOR_TABS["DATA"] = "Data";
+})(EDITOR_TABS || (EDITOR_TABS = {}));
+
+export var Toolbar = function Toolbar(_ref) {
+  var sourceCode = _ref.sourceCode,
+      fileExtension = _ref.fileExtension,
+      _ref$playground = _ref.playground,
+      playground = _ref$playground === void 0 ? {} : _ref$playground,
+      location = _ref.location,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$isFullScreen = _ref.isFullScreen,
+      isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
+      editorTabs = _ref.editorTabs,
+      currentEditorTab = _ref.currentEditorTab,
+      onEditorTabChange = _ref.onEditorTabChange,
+      _ref$onToggleFullscre = _ref.onToggleFullscreen,
+      onToggleFullscreen = _ref$onToggleFullscre === void 0 ? null : _ref$onToggleFullscre,
+      onExecuteCode = _ref.onExecuteCode;
+  var locale = useLocale();
+  var exampleTitle = _typeof(title) === 'object' ? title[locale.id] : title; // 使用 playground.dependencies 定义的版本号
+
+  var dependencies = _objectSpread(_objectSpread({}, extractImportDeps(sourceCode)), playground.dependencies);
+
+  var devDependencies = playground.devDependencies || {};
+  var codeSandboxConfig = getCodeSandboxConfig(exampleTitle, sourceCode, fileExtension, dependencies, devDependencies, playground);
+  var riddlePrefillConfig = getRiddleConfig(exampleTitle, sourceCode, fileExtension, dependencies, devDependencies, playground);
+  var stackblitzPrefillConfig = getStackblitzConfig(exampleTitle, sourceCode, fileExtension, dependencies, devDependencies, playground); // const htmlCode = getHtmlCodeTemplate(exampleTitle, sourceCode, fileExtension, dependencies, devDependencies, playground);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      riddleVisible = _useState2[0],
+      updateRiddleVisible = _useState2[1];
+
+  useEffect(function () {
+    ping(function (status) {
+      updateRiddleVisible(status === 'responded');
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.toolbar
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.editortabs
+  }, editorTabs.map(function (tab, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: tab === currentEditorTab ? styles.current : '',
+      onClick: function onClick() {
+        return onEditorTabChange(tab);
+      }
+    }, tab);
+  })), riddleVisible ? /*#__PURE__*/React.createElement("form", {
+    action: "//riddle.alibaba-inc.com/riddles/define",
+    method: "POST",
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: "data",
+    value: JSON.stringify(riddlePrefillConfig)
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    title: useT('在 Riddle 中打开')
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "submit",
+    value: "Create New Riddle with Prefilled Data",
+    className: styles.riddle
+  }))) : null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: useT('在 StackBlitz 中打开')
+  }, /*#__PURE__*/React.createElement(ThunderboltOutlined, {
+    className: styles.stackblitz,
+    onClick: function onClick() {
+      stackblitzSdk.openProject(stackblitzPrefillConfig);
+    }
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    title: useT('在 CodeSandbox 中打开')
+  }, /*#__PURE__*/React.createElement("form", {
+    action: "https://codesandbox.io/api/v1/sandboxes/define",
+    method: "POST",
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: "parameters",
+    value: getParameters(codeSandboxConfig)
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "submit",
+    className: styles.codesandbox
+  }, /*#__PURE__*/React.createElement(CodeSandboxOutlined, {
+    style: {
+      marginLeft: 8
+    }
+  })))), /*#__PURE__*/React.createElement(Paragraph, {
+    copyable: {
+      text: sourceCode
+    },
+    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, {
+    title: useT('执行代码')
+  }, /*#__PURE__*/React.createElement(PlayCircleOutlined, {
+    onClick: onExecuteCode,
+    style: {
+      marginLeft: 12
+    }
+  })));
+};

package/dist/slots/CodeEditor/Toolbar.module.less

@@ -0,0 +1,81 @@
+@import '~antd/es/style/themes/default.less';
+
+.toolbar {
+  height: 36px;
+  line-height: 36px;
+  border-bottom: 1px solid #ececec;
+  width: 100%;
+  padding: 0 16px;
+  text-align: right;
+  color: #777;
+  background: #f8f9fc;
+
+  >* {
+    display: inline-block;
+    transition: all 0.3s;
+
+    &:hover {
+      color: #222;
+    }
+  }
+
+  .codesandbox {
+    border: 0;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .riddle {
+    width: 16px;
+    height: 16px;
+    overflow: hidden;
+    text-indent: -9999px;
+    background: transparent url('https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg') center / 12px no-repeat;
+    border: 0;
+    cursor: pointer;
+    transition: all 0.3s;
+    position: relative;
+    top: .5px;
+    line-height: 1;
+  }
+
+  .stackblitz {
+    position: relative;
+    top: 1px;
+    margin-left: 8px;
+  }
+
+  .html {
+    margin-left: 10px;
+    position: relative;
+    top: 0.5px;
+  }
+
+  :global(.ant-typography-copy:not(.ant-typography-copy-success)) {
+    color: #777;
+
+    &:hover {
+      color: #222;
+    }
+  }
+}
+
+.editortabs {
+  position: absolute;
+  left: -3px;
+
+  span {
+    display: inline-block;
+    border-top: none;
+    padding: 0 24px;
+    cursor: pointer;
+
+    &.current {
+      background: #fff;
+      color: #000;
+      border-right: #ececec solid 1px;
+      border-left: #ececec solid 1px;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+import React from 'react';
+export declare type CodeEditorProps = {
+    /**
+     * 标题
+     */
+    title?: string;
+    /**
+     * 输入的源码
+     */
+    source: string;
+    /**
+     * 相对地址
+     */
+    relativePath?: string;
+    /**
+     * 是否全屏状态
+     */
+    isFullscreen?: boolean;
+    /**
+     * 在一个文档中有多个 DEMO 的时候，需要有不同的 dom id
+     */
+    replaceId?: string;
+    /**
+     * 点击全屏按钮
+     */
+    onFullscreen: (isFullScreen: boolean) => void;
+    /**
+     * 初始化
+     */
+    onReady: () => void;
+    /**
+     * 销毁
+     */
+    onDestroy: () => void;
+    /**
+     * 执行出错的时候，回调，方便上层做显示
+     */
+    onError: (e: any) => void;
+    /**
+     * playground 的一些配置
+     */
+    playground: {
+        container?: string;
+        playgroundDidMount?: string;
+        playgroundWillUnmount?: string;
+        dependencies?: {
+            [key: string]: string;
+        };
+        devDependencies?: {
+            [key: string]: string;
+        };
+        htmlCodeTemplate?: string;
+    };
+};
+/**
+ * 代码编辑器
+ */
+export declare const CodeEditor: React.FC<CodeEditorProps>;

package/dist/slots/CodeEditor/index.js

@@ -0,0 +1,200 @@
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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 { replaceInsertCss, execute, compile } from "./utils";
+import { Toolbar, EDITOR_TABS } from "./Toolbar";
+import styles from "./index.module.less";
+loader.config({
+  'vs/nls': {
+    availableLanguages: {
+      '*': 'zh-cn'
+    }
+  },
+  paths: {
+    vs: 'https://gw.alipayobjects.com/os/lib/monaco-editor/0.34.0/min/vs'
+  }
+});
+
+/**
+ * 代码编辑器
+ */
+export var CodeEditor = function CodeEditor(_ref) {
+  var _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      source = _ref.source,
+      _ref$relativePath = _ref.relativePath,
+      relativePath = _ref$relativePath === void 0 ? '' : _ref$relativePath,
+      playground = _ref.playground,
+      _ref$replaceId = _ref.replaceId,
+      replaceId = _ref$replaceId === void 0 ? 'container' : _ref$replaceId,
+      isFullscreen = _ref.isFullscreen,
+      _ref$onReady = _ref.onReady,
+      onReady = _ref$onReady === void 0 ? noop : _ref$onReady,
+      _ref$onDestroy = _ref.onDestroy,
+      onDestroy = _ref$onDestroy === void 0 ? noop : _ref$onDestroy,
+      _ref$onError = _ref.onError,
+      onError = _ref$onError === void 0 ? noop : _ref$onError,
+      _ref$onFullscreen = _ref.onFullscreen,
+      onFullscreen = _ref$onFullscreen === void 0 ? noop : _ref$onFullscreen;
+  var locale = useLocale();
+  var _useSiteData$themeCon = useSiteData().themeConfig.playground.extraLib,
+      extraLib = _useSiteData$themeCon === void 0 ? '' : _useSiteData$themeCon; // 编辑器两个 tab，分别是代码和数据
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  var _useState3 = useState(source),
+      _useState4 = _slicedToArray(_useState3, 2),
+      code = _useState4[0],
+      setCode = _useState4[1]; // monaco instance
+
+
+  var monacoRef = useRef(null); // 文件后缀
+
+  var fileExtension = relativePath.split('.')[relativePath.split('.').length - 1] || 'js'; // 菜单栏
+
+  var _useState5 = useState([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      editorTabs = _useState6[0],
+      setEditorTabs = _useState6[1]; // 当前选中菜单栏
+
+
+  var _useState7 = useState(EDITOR_TABS.JAVASCRIPT),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentEditorTab = _useState8[0],
+      setCurrentEditorTab = _useState8[1]; // 出发 auto resize
+
+
+  var dispatchResizeEvent = function dispatchResizeEvent() {
+    var e = new Event('resize');
+    window.dispatchEvent(e);
+  };
+
+  useEffect(function () {
+    // 用于上报错误信息，使用 script 执行代码
+    if (typeof window !== 'undefined') {
+      window.__reportErrorInPlayground = function (e) {
+        if (e) {
+          console.error(e);
+          onError(e);
+        }
+      };
+    }
+  });
+  var executeCode = useCallback(debounce(function (v) {
+    if (!v) return; // 1. 先编译代码
+
+    var compiled;
+
+    try {
+      compiled = compile(replaceInsertCss(v, locale.id), relativePath); // 清除错误
+
+      onError(null);
+    } catch (e) {
+      console.error(e);
+      onError(e); // 执行出错，后面的步骤不用做了！
+
+      return;
+    } // 2. 执行代码，try catch 在内部已经做了
+
+
+    execute(compiled, 'playgroundScriptContainer', playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
+  }, 300), []);
+  useEffect(function () {
+    setCode(source);
+  }, [source]);
+  useEffect(function () {
+    executeCode(code);
+  }, [code]);
+  useEffect(function () {
+    onReady();
+
+    if (playground !== null && playground !== void 0 && playground.playgroundDidMount) {
+      new Function(playground.playgroundDidMount)();
+    }
+
+    return function () {
+      onDestroy();
+
+      if (playground !== null && playground !== void 0 && playground.playgroundWillUnmount) {
+        new Function(playground.playgroundWillUnmount)();
+      }
+    };
+  }, []); // hook 用户的数据
+
+  useEffect(function () {
+    var dataFileMatch = source.match(/fetch\('(.*)'\)/);
+
+    if (dataFileMatch && dataFileMatch.length > 0) {
+      fetch(dataFileMatch[1]).then(function (response) {
+        return response.json();
+      }).then(function (data) {
+        setEditorTabs([EDITOR_TABS.JAVASCRIPT, EDITOR_TABS.DATA]);
+        setData(data);
+      });
+    }
+  }, []);
+  var onCodeChange = useCallback(function (value) {
+    if (currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
+      setCode(value);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.editor
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    fileExtension: fileExtension,
+    sourceCode: code,
+    playground: playground,
+    location: location,
+    title: title,
+    isFullScreen: isFullscreen,
+    editorTabs: editorTabs,
+    currentEditorTab: currentEditorTab,
+    onExecuteCode: function onExecuteCode() {
+      return executeCode(code);
+    },
+    onEditorTabChange: setCurrentEditorTab,
+    onToggleFullscreen: onFullscreen
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.monaco,
+    style: {
+      height: 'calc(100% - 36px)'
+    }
+  }, /*#__PURE__*/React.createElement(MonacoEditor, {
+    language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json',
+    value: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2),
+    path: relativePath,
+    loading: "Loading...",
+    options: {
+      readOnly: currentEditorTab === EDITOR_TABS.DATA,
+      automaticLayout: true,
+      minimap: {
+        enabled: false
+      },
+      scrollBeyondLastLine: false,
+      fixedOverflowWidgets: true,
+      lineNumbersMinChars: 4,
+      showFoldingControls: 'always',
+      foldingHighlight: true
+    },
+    onChange: onCodeChange,
+    onMount: function onMount(editor) {
+      monacoRef.current = editor;
+    }
+  })));
+};

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

@@ -0,0 +1,11 @@
+.editor {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+
+  .monaco {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,42 @@
+export declare function replaceFetchUrl(sourceCode: string): string;
+/**
+ * 通过代码提取代码片段的 pkg 依赖
+ * @param sourceCode
+ */
+export declare function extractImportDeps(sourceCode: string): any;
+export declare function getCodeSandboxConfig(title: string, sourceCode: string, fileExtension: string, deps: any, devDependencies: any, playground: any): {
+    files: {
+        [key: string]: any;
+    };
+};
+export declare function getRiddleConfig(title: string, sourceCode: string, fileExtension: string, deps: any, devDependencies: any, playground: any): {
+    title: string;
+    js: string;
+    html: any;
+    json: string;
+};
+export declare function getStackblitzConfig(title: string, sourceCode: string, fileExtension: string, deps: any, devDependencies: any, playground: any): {
+    title: string;
+    description: string;
+    template: any;
+    dependencies: any;
+    files: {
+        [x: string]: any;
+        'index.html': any;
+    };
+};
+export declare function getHtmlCodeTemplate(title: string, sourceCode: string, fileExtension: string, deps: any, devDependencies: any, playground: any): any;
+export declare function replaceInsertCss(str: string, lang: string): string;
+/**
+ * 执行代码
+ * @param code 运行的代码
+ * @param playgroundScriptContainer 运行的节点
+ * @param container 代码中 container dom
+ * @param replaceId rid
+ * @param cb 回调错误
+ */
+export declare function execute(code: string, playgroundScriptContainer: string, container: string, replaceId?: string): void;
+/**
+ * 编译代码
+ */
+export declare function compile(value: string, relativePath: string): any;