@lark-apaas/miaoda-inspector 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/lib/MiaodaInspector/MiaodaInspector.js

@@ -42,9 +42,11 @@ 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_utils = require("../Inspector/utils");
+var import_utils2 = require("../utils");
 var import_MiaodaInspector = require("./MiaodaInspector.css");
 var import_config_mapper = require("../utils/config-mapper");
+var import_element_guards = require("../utils/element-guards");
 function safeClassName(el) {
   const cn = el == null ? void 0 : el.className;
   if (typeof cn === "string") {
@@ -56,7 +58,13 @@ function safeClassName(el) {
   return "";
 }
 function analyzeTextOnlyNode(element, componentName, canUseNewInspector) {
-  if (!element || componentName && componentName[0] === componentName[0].toUpperCase() || !canUseNewInspector || element instanceof SVGElement) {
+  if (!element || !canUseNewInspector || element instanceof SVGElement) {
+    return {
+      hasOnlyTextNodes: false,
+      textContent: null
+    };
+  }
+  if (!(0, import_element_guards.isNativeElementName)(componentName) && !(0, import_element_guards.isAntdText)(element, componentName)) {
     return {
       hasOnlyTextNodes: false,
       textContent: null
@@ -64,9 +72,7 @@ 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,
@@ -102,6 +108,23 @@ const getElementCoordinates = (element) => {
     bottom: adjustedBottom
   };
 };
+const extractImageInfo = (element) => {
+  if (!element) {
+    return void 0;
+  }
+  if (element instanceof HTMLImageElement) {
+    const url = element.currentSrc || element.src || element.getAttribute("src") || void 0;
+    return {
+      type: "img",
+      url,
+      attribute: "src",
+      alt: element.alt || void 0,
+      width: element.naturalWidth || void 0,
+      height: element.naturalHeight || void 0
+    };
+  }
+  return void 0;
+};
 const selectedElementMap = /* @__PURE__ */ new Map();
 function elementInfoToKey(relativePath, lineNumber, columnNumber) {
   return `${relativePath}_${lineNumber}_${columnNumber}`;
@@ -123,11 +146,200 @@ function MiaodaInspector(props) {
   const mouseenter = (0, import_react.useCallback)(() => {
     setInBody(true);
   }, []);
+  const updateClickOverlay = (0, import_react.useCallback)((element, title, id) => {
+    var _a;
+    (_a = clickOverlayRef.current) == null ? void 0 : _a.remove();
+    clickOverlayRef.current = null;
+    const clickOverlay = new import_Overlay.ClickOverlay({
+      positionUpdate: () => {
+        var _a2;
+        const el = ((_a2 = selectedElementMap.get(id)) == null ? void 0 : _a2.element) || element;
+        const _coords = getElementCoordinates(el);
+        (0, import_utils2.postMessage)({
+          type: "ElementResize",
+          data: __spreadValues({
+            elementId: id
+          }, _coords)
+        });
+      },
+      onElementRebind: (newEl) => {
+        const _selected = selectedElementMap.get(id);
+        if (_selected) {
+          _selected.element = newEl;
+        }
+        const _coords = getElementCoordinates(newEl);
+        (0, import_utils2.postMessage)({
+          type: "ElementResize",
+          data: __spreadValues({
+            elementId: id
+          }, _coords)
+        });
+      }
+    });
+    clickOverlayRef.current = clickOverlay;
+    clickOverlay.highlight(element, title, id);
+  }, []);
+  const selectInspectorElement = (0, import_react.useCallback)((params) => {
+    var _a, _b, _c, _d;
+    const { codeInfo, element, name, title, componentProps } = params;
+    const coords = getElementCoordinates(element);
+    const textInfo = analyzeTextOnlyNode(element, name, canUseNewInspector.current);
+    const fontSizeInfo = (0, import_utils2.calculateFontSizeInfo)(element, name, canUseNewInspector.current, styleConfigs);
+    const fontWeightInfo = (0, import_utils2.calculateFontWeightInfo)(element, name, canUseNewInspector.current, styleConfigs);
+    const borderRadiusInfo = (0, import_utils2.calculateBorderRadiusInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const borderWidthInfo = (0, import_utils2.calculateBorderWidthInfo)(element, name, canUseNewInspector.current, styleConfigs);
+    const textAlignInfo = (0, import_utils2.calculateTextAlignInfo)(element, name, canUseNewInspector.current, styleConfigs);
+    const paddingInfo = (0, import_utils2.calculatePaddingInfo)(element, name, canUseNewInspector.current, styleConfigs);
+    const marginInfo = (0, import_utils2.calculateMarginInfo)(element, name, canUseNewInspector.current, styleConfigs);
+    const colorInfo = (0, import_utils2.calculateColorInfo)(element, name, canUseNewInspector.current, styleConfigs);
+    const borderColorInfo = (0, import_utils2.calculateBorderColorInfo)(element, name, canUseNewInspector.current, styleConfigs);
+    const backgroundColorInfo = (0, import_utils2.calculateBackgroundColorInfo)(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const imageInfo = extractImageInfo(element);
+    const dataMiaodaId = element.getAttribute("data-miaoda-id");
+    const id = dataMiaodaId || elementInfoToKey(codeInfo.relativePath, codeInfo.lineNumber, codeInfo.columnNumber);
+    const selectElement = selectedElementMap.has(id);
+    if (!selectElement) {
+      const originalState = {
+        textContent: textInfo.textContent,
+        styles: {},
+        attributes: {},
+        className: safeClassName(element)
+      };
+      if (element instanceof HTMLImageElement) {
+        originalState.attributes.src = (_b = (_a = element.getAttribute("src")) != null ? _a : element.currentSrc) != null ? _b : null;
+      }
+      selectedElementMap.set(id, {
+        elementId: id,
+        element,
+        title,
+        originalState
+      });
+    }
+    const importSourceAttr = element.getAttribute("data-miaoda-import-source");
+    const isAntdComponent = importSourceAttr === "antd" && window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ && window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.setProps;
+    const isNativeTagImage = (imageInfo == null ? void 0 : imageInfo.type) === "img" && !isAntdComponent;
+    const nativeTagComponentProps = isNativeTagImage ? {
+      src: {
+        url: (_c = imageInfo == null ? void 0 : imageInfo.url) != null ? _c : "",
+        source: "url",
+        meta: {
+          origin: "img",
+          width: imageInfo == null ? void 0 : imageInfo.width,
+          height: imageInfo == null ? void 0 : imageInfo.height
+        }
+      }
+    } : void 0;
+    const importSource = importSourceAttr != null ? importSourceAttr : isNativeTagImage ? "nativeTag" : void 0;
+    if (textInfo.hasOnlyTextNodes && canUseNewInspector.current) {
+      element.setAttribute("contenteditable", "true");
+      element.focus();
+      const TextUpdate = () => {
+        (0, import_utils2.postMessage)({
+          type: "TextUpdate",
+          data: {
+            elementId: id,
+            textContent: element.textContent
+          }
+        });
+      };
+      const dispose = () => {
+        element.removeAttribute("contenteditable");
+        element.removeEventListener("input", TextUpdate);
+      };
+      element.addEventListener("input", TextUpdate);
+      const _selectElement = selectedElementMap.get(id);
+      if (_selectElement) {
+        selectedElementMap.set(id, __spreadProps(__spreadValues({}, _selectElement), {
+          dispose
+        }));
+      }
+    }
+    (0, import_utils2.postMessage)({
+      type: "SelectInspectorElement",
+      data: __spreadProps(__spreadValues({}, codeInfo), {
+        // 移除打头的 /
+        relativePath: codeInfo.relativePath,
+        tagName: element == null ? void 0 : element.tagName,
+        componentName: name,
+        className: safeClassName(element),
+        id: (_d = element == null ? void 0 : element.id) != null ? _d : "",
+        x: coords.left,
+        y: coords.top,
+        width: coords.width,
+        height: coords.height,
+        top: coords.top,
+        right: coords.right,
+        bottom: coords.bottom,
+        left: coords.left,
+        elementId: id,
+        textContent: textInfo.hasOnlyTextNodes ? textInfo.textContent : null,
+        fontSize: fontSizeInfo,
+        fontWeight: fontWeightInfo,
+        borderRadius: borderRadiusInfo,
+        borderWidth: borderWidthInfo,
+        textAlign: textAlignInfo,
+        padding: paddingInfo,
+        margin: marginInfo,
+        color: colorInfo,
+        backgroundColor: backgroundColorInfo,
+        borderColor: borderColorInfo,
+        metadata: codeInfo.metadata,
+        importSource,
+        componentProps: isAntdComponent ? componentProps : nativeTagComponentProps
+      })
+    });
+    updateClickOverlay(element, title, id);
+  }, []);
+  const selectParent = (0, import_react.useCallback)(
+    (elementId) => {
+      const selectedElement = selectedElementMap.get(elementId);
+      if (!selectedElement || !selectedElement.element) {
+        return;
+      }
+      const htmlElementParent = selectedElement.element.parentElement;
+      if (!htmlElementParent) {
+        return;
+      }
+      const targetElement = (0, import_utils.getParentElement)(htmlElementParent);
+      if (!targetElement) {
+        return;
+      }
+      const codeInfo = (0, import_utils.getElementCodeInfo)(targetElement);
+      const { fiber, name, title } = (0, import_utils.getElementInspect)(targetElement);
+      selectInspectorElement({
+        element: targetElement,
+        fiber,
+        codeInfo,
+        name,
+        title,
+        componentProps: (0, import_utils.extractPropsFromFiber)(fiber)
+      });
+    },
+    [selectInspectorElement]
+  );
+  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]
+  );
   const handleMessage = (0, import_react.useCallback)(
     (event) => {
       var _a, _b;
       const { data } = event;
-      if ((0, import_utils.isIncomingMessage)(data, "InitConfig")) {
+      if ((0, import_utils2.isIncomingMessage)(data, "InitConfig")) {
         const { inspectorActive, userToken, appId, inspectorVersion } = data.data;
         if (inspectorActive !== void 0) {
           setActive(inspectorActive);
@@ -142,14 +354,14 @@ function MiaodaInspector(props) {
         if (appId !== void 0) {
           window.MIAODA_APP_ID = appId;
         }
-        (0, import_utils.postMessage)({
+        (0, import_utils2.postMessage)({
           type: "InspectorUIConfig",
           data: defaultUIConfig
         });
         if (inspectorVersion === "2") {
           canUseNewInspector.current = true;
         }
-      } else if ((0, import_utils.isIncomingMessage)(data, "ClearSelected")) {
+      } else if ((0, import_utils2.isIncomingMessage)(data, "ClearSelected")) {
         const { keepModifications = false } = data.data;
         (_b = clickOverlayRef.current) == null ? void 0 : _b.remove();
         clickOverlayRef.current = null;
@@ -169,13 +381,13 @@ function MiaodaInspector(props) {
           }
           selectedElementMap.clear();
         }
-      } else if ((0, import_utils.isIncomingMessage)(data, "EditText")) {
+      } else if ((0, import_utils2.isIncomingMessage)(data, "EditText")) {
         const { elementId, textContent } = data.data;
         const selectedElement = selectedElementMap.get(elementId);
         if (selectedElement && selectedElement.element) {
           selectedElement.element.textContent = textContent;
         }
-      } else if ((0, import_utils.isIncomingMessage)(data, "EditStyle")) {
+      } else if ((0, import_utils2.isIncomingMessage)(data, "EditStyle")) {
         const { elementId, styles } = data.data;
         const selectedElement = selectedElementMap.get(elementId);
         if (selectedElement && selectedElement.element) {
@@ -190,9 +402,7 @@ function MiaodaInspector(props) {
           }
           const existingDispose = selectedElement.dispose;
           const styleDispose = () => {
-            for (const [property, value] of Object.entries(
-              selectedElement.originalState.styles
-            )) {
+            for (const [property, value] of Object.entries(selectedElement.originalState.styles)) {
               if (value) {
                 element.style.setProperty(property, value);
               } else {
@@ -207,7 +417,7 @@ function MiaodaInspector(props) {
             }
           };
         }
-      } else if ((0, import_utils.isIncomingMessage)(data, "EditClassName")) {
+      } else if ((0, import_utils2.isIncomingMessage)(data, "EditClassName")) {
         const { elementId, className } = data.data;
         const selectedElement = selectedElementMap.get(elementId);
         if (selectedElement && selectedElement.element) {
@@ -215,7 +425,7 @@ function MiaodaInspector(props) {
           if (selectedElement.originalState.className === void 0) {
             selectedElement.originalState.className = safeClassName(element);
           }
-          element.className = (0, import_utils.cx)(element.className, className);
+          element.className = (0, import_utils2.cx)(element.className, className);
           const existingDispose = selectedElement.dispose;
           const classDispose = () => {
             if (selectedElement.originalState.className) {
@@ -229,9 +439,114 @@ function MiaodaInspector(props) {
             }
           };
         }
+      } else if ((0, import_utils2.isIncomingMessage)(data, "EditProps")) {
+        const { elementId, props: _props } = data.data;
+        const selectedElement = selectedElementMap.get(elementId);
+        if (selectedElement && selectedElement.element) {
+          const { element } = selectedElement;
+          if (window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ && window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.setProps) {
+            window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.setProps(elementId, _props);
+          } else {
+            Object.entries(_props).forEach(([key, value]) => {
+              if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+                element.setAttribute(`data-${key}`, String(value));
+              }
+            });
+          }
+          const existingDispose = selectedElement.dispose;
+          const propsDispose = () => {
+            if (window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__) {
+              Object.keys(_props).forEach((key) => {
+                element.removeAttribute(`data-${key}`);
+              });
+            }
+          };
+          selectedElement.dispose = () => {
+            propsDispose();
+            if (existingDispose) {
+              existingDispose();
+            }
+          };
+        }
+      } else if ((0, import_utils2.isIncomingMessage)(data, "EditIconProps")) {
+        const { elementId, prop, value } = data.data;
+        const selectedElement = selectedElementMap.get(elementId);
+        if (selectedElement && selectedElement.element) {
+          if (window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ && typeof window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.setIconProps === "function") {
+            window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.setIconProps(elementId, prop, value);
+          } else {
+            const { element } = selectedElement;
+            if (value) {
+              element.setAttribute(`data-${prop}`, String(value));
+            } else {
+              element.removeAttribute(`data-${prop}`);
+            }
+          }
+          const existingDispose = selectedElement.dispose;
+          const iconDispose = () => {
+            if (window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__ && typeof window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.setIconProps === "function") {
+              window.__MIAODA_DEVTOOLS_GLOBAL_HOOK__.setIconProps(elementId, prop, void 0);
+            } else if (selectedElement.element) {
+              selectedElement.element.removeAttribute(`data-${prop}`);
+            }
+          };
+          selectedElement.dispose = () => {
+            iconDispose();
+            if (existingDispose) {
+              existingDispose();
+            }
+          };
+        }
+      } else if ((0, import_utils2.isIncomingMessage)(data, "ReverseSelect")) {
+        const { elementId } = data.data;
+        const selectedElement = selectedElementMap.get(elementId);
+        if (selectedElement && selectedElement.element) {
+          updateClickOverlay(selectedElement.element, selectedElement.title, selectedElement.elementId);
+        }
+      } else if ((0, import_utils2.isIncomingMessage)(data, "SelectParent")) {
+        const { elementId } = data.data;
+        selectParent(elementId);
+      } else if ((0, import_utils2.isIncomingMessage)(data, "EditAttributes")) {
+        const { elementId, attributes } = data.data;
+        const selectedElement = selectedElementMap.get(elementId);
+        if (selectedElement && selectedElement.element) {
+          const { element, originalState } = selectedElement;
+          const recordedAttributes = originalState.attributes;
+          Object.entries(attributes).forEach(([attr, value]) => {
+            if (!(attr in recordedAttributes)) {
+              recordedAttributes[attr] = element.getAttribute(attr);
+            }
+            if (value === null || value === void 0 || value === "") {
+              element.removeAttribute(attr);
+            } else {
+              element.setAttribute(attr, value);
+            }
+          });
+          originalState.attributes = recordedAttributes;
+          const existingDispose = selectedElement.dispose;
+          const attributeDispose = () => {
+            if (!selectedElement.element) {
+              return;
+            }
+            Object.entries(selectedElement.originalState.attributes).forEach(([attr, value]) => {
+              var _a2, _b2;
+              if (value === null || value === void 0 || value === "") {
+                (_a2 = selectedElement.element) == null ? void 0 : _a2.removeAttribute(attr);
+              } else {
+                (_b2 = selectedElement.element) == null ? void 0 : _b2.setAttribute(attr, value);
+              }
+            });
+          };
+          selectedElement.dispose = () => {
+            attributeDispose();
+            if (existingDispose) {
+              existingDispose();
+            }
+          };
+        }
       }
     },
-    [defaultUIConfig]
+    [updateClickOverlay, selectParent, defaultUIConfig]
   );
   (0, import_react.useEffect)(() => {
     document.body.addEventListener("mouseleave", mouseleave, false);
@@ -240,7 +555,7 @@ function MiaodaInspector(props) {
       var _a;
       (_a = clickOverlayRef.current) == null ? void 0 : _a.remove();
       clickOverlayRef.current = null;
-      (0, import_utils.postMessage)({
+      (0, import_utils2.postMessage)({
         type: "PageScroll",
         data: {}
       });
@@ -259,178 +574,17 @@ function MiaodaInspector(props) {
     };
   }, []);
   (0, import_react.useEffect)(() => {
-    (0, import_utils.postMessage)({
+    (0, import_utils2.postMessage)({
       type: "PageMounted",
       data: {
-        version: "0.1.0-alpha.4",
-        theme: props.theme
-      }
-    });
-  }, []);
-  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, 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, {
-        elementId: id,
-        element,
-        originalState: {
-          textContent: textInfo.textContent,
-          className: safeClassName(element),
-          styles: {}
+        version: "0.1.0-alpha.6",
+        feature: {
+          selectParent: true,
+          reverseSelect: true
         }
-      });
-    }
-    if (textInfo.hasOnlyTextNodes && canUseNewInspector.current) {
-      element.setAttribute("contenteditable", "true");
-      element.focus();
-      const TextUpdate = () => {
-        (0, import_utils.postMessage)({
-          type: "TextUpdate",
-          data: {
-            elementId: id,
-            textContent: element.textContent
-          }
-        });
-      };
-      const dispose = () => {
-        element.removeAttribute("contenteditable");
-        element.removeEventListener("input", TextUpdate);
-      };
-      element.addEventListener("input", TextUpdate);
-      const _selectElement = selectedElementMap.get(id);
-      if (_selectElement) {
-        selectedElementMap.set(id, __spreadProps(__spreadValues({}, _selectElement), {
-          dispose
-        }));
       }
-    }
-    (0, import_utils.postMessage)({
-      type: "SelectInspectorElement",
-      data: __spreadProps(__spreadValues({}, codeInfo), {
-        // 移除打头的 /
-        relativePath: codeInfo.relativePath,
-        tagName: element == null ? void 0 : element.tagName,
-        componentName: name,
-        className: safeClassName(element),
-        id: (_a = element == null ? void 0 : element.id) != null ? _a : "",
-        x: coords.left,
-        y: coords.top,
-        width: coords.width,
-        height: coords.height,
-        top: coords.top,
-        right: coords.right,
-        bottom: coords.bottom,
-        left: coords.left,
-        elementId: id,
-        textContent: textInfo.hasOnlyTextNodes ? textInfo.textContent : null,
-        fontSize: fontSizeInfo,
-        fontWeight: fontWeightInfo,
-        borderRadius: borderRadiusInfo,
-        borderWidth: borderWidthInfo,
-        textAlign: textAlignInfo,
-        padding: paddingInfo,
-        margin: marginInfo,
-        color: colorInfo,
-        backgroundColor: backgroundColorInfo,
-        borderColor: borderColorInfo,
-        metadata: codeInfo.metadata
-      })
     });
-    (_b = clickOverlayRef.current) == null ? void 0 : _b.remove();
-    clickOverlayRef.current = null;
-    const clickOverlay = new import_Overlay.ClickOverlay(() => {
-      const _coords = getElementCoordinates(element);
-      (0, import_utils.postMessage)({
-        type: "ElementResize",
-        data: __spreadValues({
-          elementId: id
-        }, _coords)
-      });
-    });
-    clickOverlayRef.current = clickOverlay;
-    clickOverlay.highlight(element, title);
   }, []);
-  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,
     {