@antv/dumi-theme-antv 0.7.3 → 0.7.5-beta.1

package/dist/plugin/index.js

@@ -139,6 +139,12 @@ export default function ThemeAntVContextWrapper() {
         path: "examples",
         file: `${PAGES_DIR}/Examples`
       },
+      {
+        id: "dumi-theme-antv-example-list-en",
+        absPath: "/en/examples",
+        path: "en/examples",
+        file: `${PAGES_DIR}/Examples`
+      },
       {
         id: "dumi-theme-antv-example-list-lang",
         absPath: "/:language/examples",

package/dist/slots/ManualContent/Preview.js

@@ -12,6 +12,8 @@ import { PlayCircleOutlined, PushpinOutlined } from '@ant-design/icons';
 import React, { useEffect, useRef, useState } from 'react';
 import styles from "./Preview.module.less";
 import { safeEval } from "./utils";
+import { compile } from "../CodeEditor/utils";
+import { uniqueId } from 'lodash-es';
 function normalizeValue(node) {
   return node instanceof Promise ? node : Promise.resolve(node);
 }
@@ -41,7 +43,9 @@ export var Preview = function Preview(_ref) {
   var source = _ref.source,
     code = _ref.code,
     _ref$pin = _ref.pin,
-    pin = _ref$pin === void 0 ? true : _ref$pin;
+    pin = _ref$pin === void 0 ? true : _ref$pin,
+    _ref$autoMount = _ref.autoMount,
+    autoMount = _ref$autoMount === void 0 ? false : _ref$autoMount;
   var containerRef = useRef(null);
   var ulRef = useRef(null);
   var nodeRef = useRef(null);
@@ -57,40 +61,73 @@ export var Preview = function Preview(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     node = _useState6[0],
     setNode = _useState6[1];
+  var _useState7 = useState("container_".concat(uniqueId())),
+    _useState8 = _slicedToArray(_useState7, 1),
+    uniqueContainerId = _useState8[0];
+  function executeScript(code, scriptContainerId) {
+    if (!containerRef.current) return null;
+    var containerDiv = document.createElement('div');
+    containerDiv.id = scriptContainerId;
+
+    // 使用唯一ID作为容器ID，确保多个Preview组件不会冲突
+    containerDiv.innerHTML = "<div id=\"".concat(uniqueContainerId, "\" class=\"playgroundCodeContainer\" style=\"width: 100%; height: 100%\"></div>");
+    containerRef.current.innerHTML = '';
+    containerRef.current.appendChild(containerDiv);
+    var script = document.createElement('script');
+    var modifiedCode = code.replace(/'container'|"container"/g, "'".concat(uniqueContainerId, "'"));
+    script.innerHTML = modifiedCode;
+    containerDiv.appendChild(script);
+    return containerDiv;
+  }
   function execute(_x) {
     return _execute.apply(this, arguments);
   }
   function _execute() {
     _execute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(source) {
-      var value, rendered, n, _node;
+      var _node, compiledCode, scriptContainerId, containerNode, value, rendered, n;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             setError(null);
             _context.prev = 1;
+            _node = null;
+            if (!autoMount) {
+              _context.next = 10;
+              break;
+            }
+            // 手动执行，自动挂载到 DOM 上
+            compiledCode = compile(source, '', true); // 为每个脚本容器生成唯一ID
+            scriptContainerId = "script_container_".concat(uniqueId());
+            containerNode = executeScript(compiledCode, scriptContainerId);
+            _node = containerNode;
+            _context.next = 17;
+            break;
+          case 10:
+            // 自执行函数
             value = safeEval(source);
             if (value instanceof Promise) setLoading(true);
             rendered = normalizeValue(value);
-            _context.next = 7;
+            _context.next = 15;
             return rendered;
-          case 7:
+          case 15:
             n = _context.sent;
             _node = normalizeDOM(n);
+          case 17:
             setNode(_node);
             setLoading(false);
-            _context.next = 18;
+            _context.next = 26;
             break;
-          case 13:
-            _context.prev = 13;
+          case 21:
+            _context.prev = 21;
             _context.t0 = _context["catch"](1);
             setLoading(false);
             setError(_context.t0);
             console.error(_context.t0);
-          case 18:
+          case 26:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[1, 13]]);
+      }, _callee, null, [[1, 21]]);
     }));
     return _execute.apply(this, arguments);
   }
@@ -106,6 +143,7 @@ export var Preview = function Preview(_ref) {
     execute(source);
   }
   function updateToolHeight() {
+    if (!ulRef.current || !containerRef.current) return;
     var _sizeOf = sizeOf(code),
       codeHeight = _sizeOf.height;
     var _sizeOf2 = sizeOf(containerRef.current),
@@ -119,9 +157,9 @@ export var Preview = function Preview(_ref) {
     execute(source);
   }, [source]);
 
-  // 更新 node
+  // 更新 node（非 autoMount 模式）
   useEffect(function () {
-    if (containerRef.current && node) {
+    if (containerRef.current && node && !autoMount) {
       var _nodeRef$current, _nodeRef$current$clea;
       (_nodeRef$current = nodeRef.current) === null || _nodeRef$current === void 0 || (_nodeRef$current$clea = _nodeRef$current.clear) === null || _nodeRef$current$clea === void 0 || _nodeRef$current$clea.call(_nodeRef$current);
       nodeRef.current = node;
@@ -133,7 +171,7 @@ export var Preview = function Preview(_ref) {
       }
       updateToolHeight();
     }
-  }, [node]);
+  }, [node, autoMount]);
 
   // 销毁的时候调用 DOM 上的 clear 函数
   useEffect(function () {
@@ -141,13 +179,13 @@ export var Preview = function Preview(_ref) {
       var _nodeRef$current2, _nodeRef$current2$cle;
       return (_nodeRef$current2 = nodeRef.current) === null || _nodeRef$current2 === void 0 || (_nodeRef$current2$cle = _nodeRef$current2.clear) === null || _nodeRef$current2$cle === void 0 ? void 0 : _nodeRef$current2$cle.call(_nodeRef$current2);
     };
-  });
+  }, []);
 
   // 是否需要隐藏代码
   useEffect(function () {
     if (pin !== false) return;
     code.style.display = 'none';
-  }, [pin]);
+  }, [pin, code]);
 
   // 暂时和隐藏 toolbar
   useEffect(function () {
@@ -180,7 +218,7 @@ export var Preview = function Preview(_ref) {
         containerRef.current.removeEventListener('mouseleave', leave);
       }
     };
-  }, []);
+  }, [code]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.preview
   }, loading ? /*#__PURE__*/React.createElement("div", {

package/dist/utils/env.js

@@ -6,5 +6,6 @@ export var isBrowser = function isBrowser() {
 // 安全访问浏览器 API
 // eslint-disable-next-line no-unused-vars
 export var safeWindow = function safeWindow(fn) {
-  if (isBrowser()) fn(window);
+  if (isBrowser()) return fn(window);
+  return undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.7.3",
+  "version": "0.7.5-beta.1",
   "description": "AntV website theme based on dumi2.",
   "keywords": [
     "dumi",
@@ -125,7 +125,7 @@
     "@types/styled-components": "^5.1.34",
     "@umijs/lint": "^4.3.34",
     "css-loader": "^7.1.2",
-    "dumi": "^2.4.13",
+    "dumi": "2.4.18",
     "eslint": "^8.57.1",
     "father": "^4.5.1",
     "father-plugin-dumi-theme": "1.0.0-rc.1",
@@ -145,7 +145,8 @@
     "react-dom": ">=16.9.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "tag": "beta"
   },
   "authors": [
     "dumi",