@antv/dumi-theme-antv 0.7.6-beta.0 → 0.7.6-beta.1

package/dist/slots/LiveExample/index.js

@@ -45,22 +45,25 @@ export default function LiveExample(props) {
     }),
     _useState8 = _slicedToArray(_useState7, 1),
     containerId = _useState8[0];
-  var clearPreviewContainer = useCallback(function () {
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    hasSuccessfulRender = _useState10[0],
+    setHasSuccessfulRender = _useState10[1];
+  var clearContainer = useCallback(function () {
     if (previewRef.current) {
       previewRef.current.innerHTML = '';
     }
   }, []);
-  var showError = useCallback(function (message) {
-    if (previewRef.current) {
+  var handleError = useCallback(function (message) {
+    if (hasSuccessfulRender) {
+      console.error('LiveExample Error:', message);
+    } else if (previewRef.current) {
       previewRef.current.innerHTML = "\n        <div style=\"color: #fb1716; padding: 8px; border-left: 3px solid #ff0000; padding-left: 12px;\">\n          ".concat(message, "\n        </div>\n      ");
     }
-  }, []);
+  }, [hasSuccessfulRender]);
   var renderResult = useCallback(function (value) {
     var container = previewRef.current;
-    if (!container) {
-      console.warn('渲染结果时容器不存在');
-      return;
-    }
+    if (!container) return;
     if (value instanceof HTMLElement || value instanceof SVGElement || value && _typeof(value) === 'object' && value.nodeType) {
       container.appendChild(value);
     } else if (value !== null && value !== undefined) {
@@ -72,56 +75,69 @@ export default function LiveExample(props) {
 
   // Inject模式：编译并注入代码
   var executeInjectMode = useCallback(function (code) {
-    // 编译代码
     var compiledCode;
     try {
       compiledCode = compile(code, '', true);
     } catch (compileError) {
       var errorMessage = compileError instanceof Error ? compileError.message : String(compileError);
-      showError("Compile Error: ".concat(errorMessage));
+      handleError("Compile Error: ".concat(errorMessage));
       return;
     }
 
-    // 清理容器并注入代码
-    clearPreviewContainer();
+    // 清理容器并准备新的渲染
+    clearContainer();
     var container = previewRef.current;
     container.innerHTML = "<div id=\"".concat(containerId, "\" style=\"width: 100%; height: 100%;\"></div>");
 
-    // 创建并注入脚本
+    // 生成唯一的执行ID并创建脚本
+    var executionId = "exec-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
     var script = document.createElement('script');
     var modifiedCode = compiledCode.replace(/'container'|"container"/g, "'".concat(containerId, "'"));
-    script.textContent = "\n      try {\n        ".concat(modifiedCode, "\n      } catch (error) {\n        console.error('\u811A\u672C\u6267\u884C\u65F6\u53D1\u751F\u9519\u8BEF:', error);\n        const errorContainer = document.getElementById('").concat(containerId, "');\n        if (errorContainer) {\n          errorContainer.innerHTML = '<div style=\"color: #fb1716; padding: 8px; border-left: 3px solid #ff0000; padding-left: 12px;\">Runtime Error: ' + error.message + '</div>';\n        }\n      }\n    ");
+    script.textContent = "\n      try {\n        ".concat(modifiedCode, "\n        const successElement = document.createElement('div');\n        successElement.id = 'execution-success-").concat(executionId, "';\n        successElement.style.display = 'none';\n        document.body.appendChild(successElement);\n      } catch (error) {\n        console.error('\u811A\u672C\u6267\u884C\u65F6\u53D1\u751F\u9519\u8BEF:', error);\n        const errorElement = document.createElement('div');\n        errorElement.id = 'execution-error-").concat(executionId, "';\n        errorElement.textContent = error.message;\n        errorElement.style.display = 'none';\n        document.body.appendChild(errorElement);\n\n        if (!").concat(hasSuccessfulRender, ") {\n          const errorContainer = document.getElementById('").concat(containerId, "');\n          if (errorContainer) {\n            errorContainer.innerHTML = '<div style=\"color: #fb1716; padding: 8px; border-left: 3px solid #ff0000; padding-left: 12px;\">Runtime Error: ' + error.message + '</div>';\n          }\n        }\n      }\n    ");
     document.head.appendChild(script);
 
-    // 延迟清理脚本
+    // 检查执行结果并清理
     setTimeout(function () {
+      var successElement = document.getElementById("execution-success-".concat(executionId));
+      var errorElement = document.getElementById("execution-error-".concat(executionId));
+      if (successElement) {
+        setHasSuccessfulRender(true);
+        document.body.removeChild(successElement);
+      } else if (errorElement) {
+        var errorMsg = errorElement.textContent || 'Unknown error';
+        if (hasSuccessfulRender) {
+          console.error('LiveExample Runtime Error:', errorMsg);
+        }
+        document.body.removeChild(errorElement);
+      }
       if (script.parentNode) {
         script.parentNode.removeChild(script);
       }
     }, 100);
-  }, [containerId, clearPreviewContainer, showError]);
+  }, [containerId, clearContainer, handleError, hasSuccessfulRender]);
 
   // Direct模式：直接执行代码
   var executeDirectMode = useCallback(function (code) {
-    clearPreviewContainer();
-    var result = safeEval(code);
-
-    // 处理Promise结果
-    if (result && typeof result.then === 'function') {
-      result.then(function (resolvedValue) {
-        renderResult(resolvedValue);
-      }).catch(function (error) {
-        showError("Promise Error: ".concat(error.message || String(error)));
-      });
-    } else {
+    var executeAndRender = function executeAndRender(result) {
+      clearContainer();
       renderResult(result);
+      setHasSuccessfulRender(true);
+    };
+    try {
+      var result = safeEval(code);
+      if (result && typeof result.then === 'function') {
+        result.then(executeAndRender).catch(function (error) {
+          handleError("Promise Error: ".concat(error.message || String(error)));
+        });
+      } else {
+        executeAndRender(result);
+      }
+    } catch (error) {
+      handleError("Execution Error: ".concat(error instanceof Error ? error.message : String(error)));
     }
-  }, [clearPreviewContainer, renderResult, showError]);
-
-  // 主执行函数
+  }, [clearContainer, renderResult, handleError]);
   var execute = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(code) {
-      var errorMessage;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -129,25 +145,16 @@ export default function LiveExample(props) {
               isLoading: true,
               error: null
             });
-            try {
-              if (inject) {
-                executeInjectMode(code);
-              } else {
-                executeDirectMode(code);
-              }
-              setExecutionState({
-                isLoading: false,
-                error: null
-              });
-            } catch (error) {
-              errorMessage = error instanceof Error ? error.message : String(error);
-              setExecutionState({
-                isLoading: false,
-                error: errorMessage
-              });
-              showError("Execution Error: ".concat(errorMessage));
+            if (inject) {
+              executeInjectMode(code);
+            } else {
+              executeDirectMode(code);
             }
-          case 2:
+            setExecutionState({
+              isLoading: false,
+              error: null
+            });
+          case 3:
           case "end":
             return _context.stop();
         }
@@ -156,17 +163,13 @@ export default function LiveExample(props) {
     return function (_x) {
       return _ref.apply(this, arguments);
     };
-  }(), [inject, executeInjectMode, executeDirectMode, showError]);
-
-  // 工具栏高度更新
+  }(), [inject, executeInjectMode, executeDirectMode]);
   var updateToolbarHeight = useCallback(function () {
     if (!toolbarRef.current || !previewRef.current || !codeRef.current) return;
     var codeHeight = codeRef.current.clientHeight;
     var previewHeight = previewRef.current.clientHeight;
     toolbarRef.current.style.height = "".concat(codeHeight + previewHeight, "px");
   }, []);
-
-  // 事件处理函数
   var toggleCodeVisibility = useCallback(function () {
     var visible = !isCodeVisible;
     setIsCodeVisible(visible);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.7.6-beta.0",
+  "version": "0.7.6-beta.1",
   "description": "AntV website theme based on dumi2.",
   "keywords": [
     "dumi",