@lark-apaas/miaoda-inspector 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/lib/MiaodaInspector/MiaodaInspector.js

@@ -1,118 +1,56 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "MiaodaInspector", {
-  enumerable: true,
-  get: function() {
-    return MiaodaInspector;
-  }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = /* @__PURE__ */ _interop_require_wildcard(require("react"));
-const _Inspector = require("../Inspector");
-const _Overlay = require("../Inspector/Overlay");
-const _utils = require("../utils");
-require("./MiaodaInspector.css");
-const _configmapper = require("../utils/config-mapper");
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _getRequireWildcardCache(nodeInterop) {
-  if (typeof WeakMap !== "function")
-    return null;
-  var cacheBabelInterop = /* @__PURE__ */ new WeakMap();
-  var cacheNodeInterop = /* @__PURE__ */ new WeakMap();
-  return (_getRequireWildcardCache = function(nodeInterop2) {
-    return nodeInterop2 ? cacheNodeInterop : cacheBabelInterop;
-  })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-  if (!nodeInterop && obj && obj.__esModule) {
-    return obj;
-  }
-  if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-    return {
-      default: obj
-    };
-  }
-  var cache = _getRequireWildcardCache(nodeInterop);
-  if (cache && cache.has(obj)) {
-    return cache.get(obj);
-  }
-  var newObj = {};
-  var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-  for (var key in obj) {
-    if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-      var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-      if (desc && (desc.get || desc.set)) {
-        Object.defineProperty(newObj, key, desc);
-      } else {
-        newObj[key] = obj[key];
-      }
-    }
-  }
-  newObj.default = obj;
-  if (cache) {
-    cache.set(obj, newObj);
-  }
-  return newObj;
-}
-function _object_spread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys2 = Object.keys(source);
-    if (typeof Object.getOwnPropertySymbols === "function") {
-      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    ownKeys2.forEach(function(key) {
-      _define_property(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) {
-      symbols = symbols.filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _object_spread_props(target, source) {
-  source = source != null ? source : {};
-  if (Object.getOwnPropertyDescriptors) {
-    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-  } else {
-    ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 target;
-}
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MiaodaInspector_exports = {};
+__export(MiaodaInspector_exports, {
+  MiaodaInspector: () => MiaodaInspector
+});
+module.exports = __toCommonJS(MiaodaInspector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_Inspector = require("../Inspector");
+var import_Overlay = require("../Inspector/Overlay");
+var import_utils = require("../utils");
+var import_MiaodaInspector = require("./MiaodaInspector.css");
+var import_config_mapper = require("../utils/config-mapper");
 function safeClassName(el) {
-  const cn = el === null || el === void 0 ? void 0 : el.className;
+  const cn = el == null ? void 0 : el.className;
   if (typeof cn === "string") {
     return cn;
   }
-  if (typeof (cn === null || cn === void 0 ? void 0 : cn.baseVal) === "string") {
+  if (typeof (cn == null ? void 0 : cn.baseVal) === "string") {
     return cn.baseVal;
   }
   return "";
@@ -126,7 +64,9 @@ function analyzeTextOnlyNode(element, componentName, canUseNewInspector) {
   }
   try {
     const childNodes = Array.from(element.childNodes);
-    const textNodes = childNodes.filter((node) => node.nodeType === Node.TEXT_NODE);
+    const textNodes = childNodes.filter(
+      (node) => node.nodeType === Node.TEXT_NODE
+    );
     const hasOnlyText = childNodes.length > 0 && textNodes.length === childNodes.length;
     return {
       hasOnlyTextNodes: hasOnlyText,
@@ -141,7 +81,7 @@ function analyzeTextOnlyNode(element, componentName, canUseNewInspector) {
   };
 }
 const getElementCoordinates = (element) => {
-  const boundingClientRect = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+  const boundingClientRect = element == null ? void 0 : element.getBoundingClientRect();
   const computedStyle = element ? window.getComputedStyle(element) : null;
   const marginLeft = computedStyle ? parseFloat(computedStyle.marginLeft) || 0 : 0;
   const marginRight = computedStyle ? parseFloat(computedStyle.marginRight) || 0 : 0;
@@ -167,139 +107,140 @@ function elementInfoToKey(relativePath, lineNumber, columnNumber) {
   return `${relativePath}_${lineNumber}_${columnNumber}`;
 }
 const enableInner = (() => {
-  var _localStorage;
-  return ((_localStorage = localStorage) === null || _localStorage === void 0 ? void 0 : _localStorage.getItem("miaoda-inspector-inner")) === "true";
+  return (localStorage == null ? void 0 : localStorage.getItem("miaoda-inspector-inner")) === "true";
 })();
 function MiaodaInspector(props) {
-  const [_active, setActive] = (0, _react.useState)(false);
-  const [inBody, setInBody] = (0, _react.useState)(true);
+  const [_active, setActive] = (0, import_react.useState)(false);
+  const [inBody, setInBody] = (0, import_react.useState)(true);
   const active = (_active || enableInner) && inBody;
-  const canUseNewInspector = (0, _react.useRef)(false);
-  const clickOverlayRef = (0, _react.useRef)(null);
+  const canUseNewInspector = (0, import_react.useRef)(false);
+  const clickOverlayRef = (0, import_react.useRef)(null);
   const defaultUIConfig = props.theme.themeToken;
-  const styleConfigs = (0, _configmapper.getAllStyleConfigs)(defaultUIConfig);
-  const mouseleave = (0, _react.useCallback)(() => {
+  const styleConfigs = (0, import_config_mapper.getAllStyleConfigs)(defaultUIConfig);
+  const mouseleave = (0, import_react.useCallback)(() => {
     setInBody(false);
   }, []);
-  const mouseenter = (0, _react.useCallback)(() => {
+  const mouseenter = (0, import_react.useCallback)(() => {
     setInBody(true);
   }, []);
-  const handleMessage = (0, _react.useCallback)((event) => {
-    const { data } = event;
-    if ((0, _utils.isIncomingMessage)(data, "InitConfig")) {
-      const { inspectorActive, userToken, appId, inspectorVersion } = data.data;
-      if (inspectorActive !== void 0) {
-        setActive(inspectorActive);
-        if (inspectorActive === false) {
-          var _clickOverlayRef_current;
-          (_clickOverlayRef_current = clickOverlayRef.current) === null || _clickOverlayRef_current === void 0 ? void 0 : _clickOverlayRef_current.remove();
-          clickOverlayRef.current = null;
+  const handleMessage = (0, import_react.useCallback)(
+    (event) => {
+      var _a, _b;
+      const { data } = event;
+      if ((0, import_utils.isIncomingMessage)(data, "InitConfig")) {
+        const { inspectorActive, userToken, appId, inspectorVersion } = data.data;
+        if (inspectorActive !== void 0) {
+          setActive(inspectorActive);
+          if (inspectorActive === false) {
+            (_a = clickOverlayRef.current) == null ? void 0 : _a.remove();
+            clickOverlayRef.current = null;
+          }
         }
-      }
-      if (userToken !== void 0) {
-        window.MIAODA_BUILTIN_TTT = userToken;
-      }
-      if (appId !== void 0) {
-        window.MIAODA_APP_ID = appId;
-      }
-      (0, _utils.postMessage)({
-        type: "InspectorUIConfig",
-        data: defaultUIConfig
-      });
-      if (inspectorVersion === "2") {
-        canUseNewInspector.current = true;
-      }
-    } else if ((0, _utils.isIncomingMessage)(data, "ClearSelected")) {
-      var _clickOverlayRef_current1;
-      const { keepModifications = false } = data.data;
-      (_clickOverlayRef_current1 = clickOverlayRef.current) === null || _clickOverlayRef_current1 === void 0 ? void 0 : _clickOverlayRef_current1.remove();
-      clickOverlayRef.current = null;
-      if (canUseNewInspector.current && !keepModifications) {
-        for (const [_, selectedElement] of selectedElementMap.entries()) {
-          if (selectedElement.element) {
-            if (selectedElement.originalState.textContent) {
-              selectedElement.element.textContent = selectedElement.originalState.textContent;
+        if (userToken !== void 0) {
+          window.MIAODA_BUILTIN_TTT = userToken;
+        }
+        if (appId !== void 0) {
+          window.MIAODA_APP_ID = appId;
+        }
+        (0, import_utils.postMessage)({
+          type: "InspectorUIConfig",
+          data: defaultUIConfig
+        });
+        if (inspectorVersion === "2") {
+          canUseNewInspector.current = true;
+        }
+      } else if ((0, import_utils.isIncomingMessage)(data, "ClearSelected")) {
+        const { keepModifications = false } = data.data;
+        (_b = clickOverlayRef.current) == null ? void 0 : _b.remove();
+        clickOverlayRef.current = null;
+        if (canUseNewInspector.current && !keepModifications) {
+          for (const [_, selectedElement] of selectedElementMap.entries()) {
+            if (selectedElement.element) {
+              if (selectedElement.originalState.textContent) {
+                selectedElement.element.textContent = selectedElement.originalState.textContent;
+              }
+              if (selectedElement.originalState.className && !(selectedElement.element instanceof SVGElement)) {
+                selectedElement.element.className = selectedElement.originalState.className;
+              }
             }
-            if (selectedElement.originalState.className && !(selectedElement.element instanceof SVGElement)) {
-              selectedElement.element.className = selectedElement.originalState.className;
+            if (selectedElement.dispose) {
+              selectedElement.dispose();
             }
           }
-          if (selectedElement.dispose) {
-            selectedElement.dispose();
-          }
+          selectedElementMap.clear();
         }
-        selectedElementMap.clear();
-      }
-    } else if ((0, _utils.isIncomingMessage)(data, "EditText")) {
-      const { elementId, textContent } = data.data;
-      const selectedElement = selectedElementMap.get(elementId);
-      if (selectedElement && selectedElement.element) {
-        selectedElement.element.textContent = textContent;
-      }
-    } else if ((0, _utils.isIncomingMessage)(data, "EditStyle")) {
-      const { elementId, styles } = data.data;
-      const selectedElement = selectedElementMap.get(elementId);
-      if (selectedElement && selectedElement.element) {
-        const { element } = selectedElement;
-        for (const [property] of Object.entries(styles)) {
-          if (!(property in selectedElement.originalState.styles)) {
-            selectedElement.originalState.styles[property] = element.style.getPropertyValue(property);
-          }
+      } else if ((0, import_utils.isIncomingMessage)(data, "EditText")) {
+        const { elementId, textContent } = data.data;
+        const selectedElement = selectedElementMap.get(elementId);
+        if (selectedElement && selectedElement.element) {
+          selectedElement.element.textContent = textContent;
         }
-        for (const [property, value] of Object.entries(styles)) {
-          element.style.setProperty(property, value);
-        }
-        const existingDispose = selectedElement.dispose;
-        const styleDispose = () => {
-          for (const [property, value] of Object.entries(selectedElement.originalState.styles)) {
-            if (value) {
-              element.style.setProperty(property, value);
-            } else {
-              element.style.removeProperty(property);
+      } else if ((0, import_utils.isIncomingMessage)(data, "EditStyle")) {
+        const { elementId, styles } = data.data;
+        const selectedElement = selectedElementMap.get(elementId);
+        if (selectedElement && selectedElement.element) {
+          const { element } = selectedElement;
+          for (const [property] of Object.entries(styles)) {
+            if (!(property in selectedElement.originalState.styles)) {
+              selectedElement.originalState.styles[property] = element.style.getPropertyValue(property);
             }
           }
-        };
-        selectedElement.dispose = () => {
-          styleDispose();
-          if (existingDispose) {
-            existingDispose();
+          for (const [property, value] of Object.entries(styles)) {
+            element.style.setProperty(property, value);
           }
-        };
-      }
-    } else if ((0, _utils.isIncomingMessage)(data, "EditClassName")) {
-      const { elementId, className } = data.data;
-      const selectedElement = selectedElementMap.get(elementId);
-      if (selectedElement && selectedElement.element) {
-        const { element } = selectedElement;
-        if (selectedElement.originalState.className === void 0) {
-          selectedElement.originalState.className = safeClassName(element);
+          const existingDispose = selectedElement.dispose;
+          const styleDispose = () => {
+            for (const [property, value] of Object.entries(
+              selectedElement.originalState.styles
+            )) {
+              if (value) {
+                element.style.setProperty(property, value);
+              } else {
+                element.style.removeProperty(property);
+              }
+            }
+          };
+          selectedElement.dispose = () => {
+            styleDispose();
+            if (existingDispose) {
+              existingDispose();
+            }
+          };
         }
-        element.className = (0, _utils.cx)(element.className, className);
-        const existingDispose = selectedElement.dispose;
-        const classDispose = () => {
-          if (selectedElement.originalState.className) {
-            element.className = selectedElement.originalState.className;
+      } else if ((0, import_utils.isIncomingMessage)(data, "EditClassName")) {
+        const { elementId, className } = data.data;
+        const selectedElement = selectedElementMap.get(elementId);
+        if (selectedElement && selectedElement.element) {
+          const { element } = selectedElement;
+          if (selectedElement.originalState.className === void 0) {
+            selectedElement.originalState.className = safeClassName(element);
           }
-        };
-        selectedElement.dispose = () => {
-          classDispose();
-          if (existingDispose) {
-            existingDispose();
-          }
-        };
+          element.className = (0, import_utils.cx)(element.className, className);
+          const existingDispose = selectedElement.dispose;
+          const classDispose = () => {
+            if (selectedElement.originalState.className) {
+              element.className = selectedElement.originalState.className;
+            }
+          };
+          selectedElement.dispose = () => {
+            classDispose();
+            if (existingDispose) {
+              existingDispose();
+            }
+          };
+        }
       }
-    }
-  }, [
-    defaultUIConfig
-  ]);
-  (0, _react.useEffect)(() => {
+    },
+    [defaultUIConfig]
+  );
+  (0, import_react.useEffect)(() => {
     document.body.addEventListener("mouseleave", mouseleave, false);
     document.body.addEventListener("mouseenter", mouseenter, false);
     const handleScroll = () => {
-      var _clickOverlayRef_current;
-      (_clickOverlayRef_current = clickOverlayRef.current) === null || _clickOverlayRef_current === void 0 ? void 0 : _clickOverlayRef_current.remove();
+      var _a;
+      (_a = clickOverlayRef.current) == null ? void 0 : _a.remove();
       clickOverlayRef.current = null;
-      (0, _utils.postMessage)({
+      (0, import_utils.postMessage)({
         type: "PageScroll",
         data: {}
       });
@@ -311,37 +252,95 @@ function MiaodaInspector(props) {
       window.removeEventListener("scroll", handleScroll, true);
     };
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     window.addEventListener("message", handleMessage);
     return () => {
       window.removeEventListener("message", handleMessage);
     };
   }, []);
-  (0, _react.useEffect)(() => {
-    (0, _utils.postMessage)({
+  (0, import_react.useEffect)(() => {
+    (0, import_utils.postMessage)({
       type: "PageMounted",
       data: {
-        version: "0.1.0",
+        version: "0.1.0-alpha.1",
         theme: props.theme
       }
     });
   }, []);
-  const selectInspectorElement = (0, _react.useCallback)((params) => {
-    var _clickOverlayRef_current;
+  const selectInspectorElement = (0, import_react.useCallback)((params) => {
+    var _a, _b;
     const { codeInfo, element, name, title } = params;
     const coords = getElementCoordinates(element);
-    const textInfo = analyzeTextOnlyNode(element, name, canUseNewInspector.current);
-    const fontSizeInfo = (0, _utils.calculateFontSizeInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const fontWeightInfo = (0, _utils.calculateFontWeightInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const borderRadiusInfo = (0, _utils.calculateBorderRadiusInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const borderWidthInfo = (0, _utils.calculateBorderWidthInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const textAlignInfo = (0, _utils.calculateTextAlignInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const paddingInfo = (0, _utils.calculatePaddingInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const marginInfo = (0, _utils.calculateMarginInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const colorInfo = (0, _utils.calculateColorInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const backgroundColorInfo = (0, _utils.calculateBackgroundColorInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const borderColorInfo = (0, _utils.calculateBorderColorInfo)(element, name, canUseNewInspector.current, styleConfigs);
-    const id = elementInfoToKey(codeInfo.relativePath, codeInfo.lineNumber, codeInfo.columnNumber);
+    const textInfo = analyzeTextOnlyNode(
+      element,
+      name,
+      canUseNewInspector.current
+    );
+    const fontSizeInfo = (0, import_utils.calculateFontSizeInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const fontWeightInfo = (0, import_utils.calculateFontWeightInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const borderRadiusInfo = (0, import_utils.calculateBorderRadiusInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const borderWidthInfo = (0, import_utils.calculateBorderWidthInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const textAlignInfo = (0, import_utils.calculateTextAlignInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const paddingInfo = (0, import_utils.calculatePaddingInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const marginInfo = (0, import_utils.calculateMarginInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const colorInfo = (0, import_utils.calculateColorInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const backgroundColorInfo = (0, import_utils.calculateBackgroundColorInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const borderColorInfo = (0, import_utils.calculateBorderColorInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const id = elementInfoToKey(
+      codeInfo.relativePath,
+      codeInfo.lineNumber,
+      codeInfo.columnNumber
+    );
     const selectElement = selectedElementMap.has(id);
     if (!selectElement) {
       selectedElementMap.set(id, {
@@ -358,7 +357,7 @@ function MiaodaInspector(props) {
       element.setAttribute("contenteditable", "true");
       element.focus();
       const TextUpdate = () => {
-        (0, _utils.postMessage)({
+        (0, import_utils.postMessage)({
           type: "TextUpdate",
           data: {
             elementId: id,
@@ -373,21 +372,20 @@ function MiaodaInspector(props) {
       element.addEventListener("input", TextUpdate);
       const _selectElement = selectedElementMap.get(id);
       if (_selectElement) {
-        selectedElementMap.set(id, _object_spread_props(_object_spread({}, _selectElement), {
+        selectedElementMap.set(id, __spreadProps(__spreadValues({}, _selectElement), {
           dispose
         }));
       }
     }
-    var _element_id;
-    (0, _utils.postMessage)({
+    (0, import_utils.postMessage)({
       type: "SelectInspectorElement",
-      data: _object_spread_props(_object_spread({}, codeInfo), {
+      data: __spreadProps(__spreadValues({}, codeInfo), {
         // 移除打头的 /
         relativePath: codeInfo.relativePath,
-        tagName: element === null || element === void 0 ? void 0 : element.tagName,
+        tagName: element == null ? void 0 : element.tagName,
         componentName: name,
         className: safeClassName(element),
-        id: (_element_id = element === null || element === void 0 ? void 0 : element.id) !== null && _element_id !== void 0 ? _element_id : "",
+        id: (_a = element == null ? void 0 : element.id) != null ? _a : "",
         x: coords.left,
         y: coords.top,
         width: coords.width,
@@ -411,13 +409,13 @@ function MiaodaInspector(props) {
         metadata: codeInfo.metadata
       })
     });
-    (_clickOverlayRef_current = clickOverlayRef.current) === null || _clickOverlayRef_current === void 0 ? void 0 : _clickOverlayRef_current.remove();
+    (_b = clickOverlayRef.current) == null ? void 0 : _b.remove();
     clickOverlayRef.current = null;
-    const clickOverlay = new _Overlay.ClickOverlay(() => {
+    const clickOverlay = new import_Overlay.ClickOverlay(() => {
       const _coords = getElementCoordinates(element);
-      (0, _utils.postMessage)({
+      (0, import_utils.postMessage)({
         type: "ElementResize",
-        data: _object_spread({
+        data: __spreadValues({
           elementId: id
         }, _coords)
       });
@@ -425,23 +423,24 @@ function MiaodaInspector(props) {
     clickOverlayRef.current = clickOverlay;
     clickOverlay.highlight(element, title);
   }, []);
-  const handleCodeInfo = (0, _react.useCallback)((name, info) => {
-    const relativePath = (info === null || info === void 0 ? void 0 : info.startsWith(props.cwd)) ? info.replace(props.cwd, "") : info;
-    var _relativePath_replace;
-    return [
-      name,
-      (_relativePath_replace = relativePath === null || relativePath === void 0 ? void 0 : relativePath.replace(/^\//, "")) !== null && _relativePath_replace !== void 0 ? _relativePath_replace : ""
-    ];
-  }, [
-    props.cwd
-  ]);
-  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_Inspector.Inspector, {
-    disable: false,
-    active,
-    onClickElement: selectInspectorElement,
-    handleCodeInfo,
-    onActiveChange: (newActive) => {
-      setActive(newActive);
+  const handleCodeInfo = (0, import_react.useCallback)(
+    (name, info) => {
+      var _a;
+      const relativePath = (info == null ? void 0 : info.startsWith(props.cwd)) ? info.replace(props.cwd, "") : info;
+      return [name, (_a = relativePath == null ? void 0 : relativePath.replace(/^\//, "")) != null ? _a : ""];
+    },
+    [props.cwd]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Inspector.Inspector,
+    {
+      disable: false,
+      active,
+      onClickElement: selectInspectorElement,
+      handleCodeInfo,
+      onActiveChange: (newActive) => {
+        setActive(newActive);
+      }
     }
-  });
+  );
 }