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

package/dist/es/Inspector/Inspector.mjs

@@ -9,28 +9,9 @@ import {
   setupHighlighter,
   getElementCodeInfo,
   getElementInspect,
-  getReferenceFiber
+  getParentElement,
+  extractPropsFromFiber
 } from "./utils";
-import { getElementFiberUpward } from "./utils/fiber";
-const getParentElement = (element) => {
-  let parent = element;
-  while (parent && parent.tagName !== "HTML") {
-    if (parent.dataset.miaodaComponentName) {
-      return parent;
-    }
-    const fiber = getElementFiberUpward(parent);
-    const parentFiber = parent.parentElement ? getElementFiberUpward(parent.parentElement) : void 0;
-    const referenceFiber = getReferenceFiber(fiber);
-    const parentReferenceFiber = parentFiber ? getReferenceFiber(parentFiber) : null;
-    const currentName = referenceFiber == null ? void 0 : referenceFiber.pendingProps["data-miaoda-component-name"];
-    const parentName = parentReferenceFiber ? parentReferenceFiber.pendingProps["data-miaoda-component-name"] : null;
-    if (currentName && currentName !== parentName) {
-      return parent;
-    }
-    parent = parent.parentElement;
-  }
-  return;
-};
 const defaultHotkeys = () => {
   var _a;
   return ((_a = navigator.platform) == null ? void 0 : _a.startsWith("Mac")) ? ["Ctrl", "Shift", "Command", "C"] : ["Ctrl", "Shift", "Alt", "C"];
@@ -99,7 +80,8 @@ const Inspector = (props) => {
       fiber,
       codeInfo,
       name,
-      title
+      title,
+      componentProps: extractPropsFromFiber(fiber)
     });
     if (fiber && codeInfo) {
       onInspectElement == null ? void 0 : onInspectElement({

package/dist/es/Inspector/Overlay.mjs

@@ -1,8 +1,5 @@
 import "../chunk-I4E63NIC.mjs";
-import {
-  getElementDimensions,
-  getNestedBoundingClientRect
-} from "./utils";
+import { getElementDimensions, getNestedBoundingClientRect } from "./utils";
 const overlayStyles = {
   padding: "transparent",
   margin: "transparent",
@@ -271,14 +268,8 @@ class Overlay {
       const box = getNestedBoundingClientRect(element, this.window);
       const dims = getElementDimensions(element);
       outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
-      outerBox.right = Math.max(
-        outerBox.right,
-        box.left + box.width + dims.marginRight
-      );
-      outerBox.bottom = Math.max(
-        outerBox.bottom,
-        box.top + box.height + dims.marginBottom
-      );
+      outerBox.right = Math.max(outerBox.right, box.left + box.width + dims.marginRight);
+      outerBox.bottom = Math.max(outerBox.bottom, box.top + box.height + dims.marginBottom);
       outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
       const rect = this.rects[index];
       rect.update(box, dims);
@@ -293,10 +284,7 @@ class Overlay {
     } else {
       this.tip.updateText(name);
     }
-    const tipBounds = getNestedBoundingClientRect(
-      this.tipBoundsWindow.document.documentElement,
-      this.window
-    );
+    const tipBounds = getNestedBoundingClientRect(this.tipBoundsWindow.document.documentElement, this.window);
     this.tip.updatePosition(
       {
         top: outerBox.top,
@@ -322,10 +310,15 @@ class Overlay {
   }
 }
 class ClickOverlay {
-  constructor(positionUpdate) {
+  constructor(options) {
     this.currentElement = null;
     this.currentName = void 0;
-    this.positionUpdate = positionUpdate;
+    if (typeof options === "function") {
+      this.positionUpdate = options;
+    } else {
+      this.positionUpdate = options == null ? void 0 : options.positionUpdate;
+      this.onElementRebind = options == null ? void 0 : options.onElementRebind;
+    }
     const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
     this.window = currentWindow;
     const tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
@@ -343,7 +336,17 @@ class ClickOverlay {
       }
       rafId = requestAnimationFrame(() => {
         if (this.currentElement) {
-          this.updatePosition(this.currentElement);
+          if (!this.currentElement.isConnected && this.currentElementId) {
+            const candidate = this.window.document.querySelector(
+              `[data-miaoda-id="${CSS.escape(this.currentElementId)}"]`
+            );
+            if (candidate) {
+              this._rebind(candidate);
+            }
+          }
+          if (this.currentElement) {
+            this.updatePosition(this.currentElement);
+          }
         }
       });
       (_a = this.positionUpdate) == null ? void 0 : _a.call(this);
@@ -359,16 +362,23 @@ class ClickOverlay {
     this.currentElement = null;
     this.resizeObserver.disconnect();
     this.currentName = void 0;
+    this.currentElementId = void 0;
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = void 0;
+    }
     if (this.container.parentNode) {
       this.container.parentNode.removeChild(this.container);
     }
   }
-  highlight(element, name) {
+  highlight(element, name, elementId) {
+    var _a;
     if (!this.rect) {
       this.rect = new ClickOverlayRect(this.window.document, this.container);
     }
     this.resizeObserver.disconnect();
     this.currentElement = element;
+    this.currentElementId = (_a = elementId != null ? elementId : element.getAttribute("data-miaoda-id")) != null ? _a : void 0;
     if (!name) {
       name = element.nodeName.toLowerCase();
     }
@@ -376,6 +386,22 @@ class ClickOverlay {
     this.tip.updateText(name);
     this.updatePosition(element);
     this.resizeObserver.observe(element);
+    if (!this.mutationObserver) {
+      this.mutationObserver = new MutationObserver(() => {
+        if (this.currentElement && this.currentElement.isConnected) return;
+        if (!this.currentElementId) return;
+        const candidate = this.window.document.querySelector(
+          `[data-miaoda-id="${CSS.escape(this.currentElementId)}"]`
+        );
+        if (candidate && candidate !== this.currentElement) {
+          this._rebind(candidate);
+        }
+      });
+      this.mutationObserver.observe(this.window.document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
   }
   updatePosition(element) {
     var _a;
@@ -388,20 +414,11 @@ class ClickOverlay {
     const box = getNestedBoundingClientRect(element, this.window);
     const dims = getElementDimensions(element);
     outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
-    outerBox.right = Math.max(
-      outerBox.right,
-      box.left + box.width + dims.marginRight
-    );
-    outerBox.bottom = Math.max(
-      outerBox.bottom,
-      box.top + box.height + dims.marginBottom
-    );
+    outerBox.right = Math.max(outerBox.right, box.left + box.width + dims.marginRight);
+    outerBox.bottom = Math.max(outerBox.bottom, box.top + box.height + dims.marginBottom);
     outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
     (_a = this.rect) == null ? void 0 : _a.update(box, dims);
-    const tipBounds = getNestedBoundingClientRect(
-      this.tipBoundsWindow.document.documentElement,
-      this.window
-    );
+    const tipBounds = getNestedBoundingClientRect(this.tipBoundsWindow.document.documentElement, this.window);
     if (box.width === 0 || box.height === 0) {
       this.tip.invisible();
     }
@@ -425,6 +442,15 @@ class ClickOverlay {
     (_a = this.rect) == null ? void 0 : _a.remove();
     this.tip.invisible();
   }
+  _rebind(newElement) {
+    this.resizeObserver.disconnect();
+    this.currentElement = newElement;
+    this.updatePosition(newElement);
+    this.resizeObserver.observe(newElement);
+    if (this.onElementRebind) {
+      this.onElementRebind(newElement);
+    }
+  }
 }
 export {
   ClickOverlay,

package/dist/es/Inspector/utils/inspect.mjs

@@ -1,4 +1,5 @@
 import "../../chunk-I4E63NIC.mjs";
+import React from "react";
 import {
   isNativeTagFiber,
   isReactSymbolFiber,
@@ -69,7 +70,7 @@ const getReferenceFiber = (baseFiber) => {
   const directParent = getDirectParentFiber(baseFiber);
   if (!directParent) return void 0;
   const isParentNative = isNativeTagFiber(directParent);
-  const isOnlyOneChild = !directParent.child.sibling;
+  const isOnlyOneChild = !!directParent.child && !directParent.child.sibling;
   let referenceFiber = !isParentNative && isOnlyOneChild ? directParent : baseFiber;
   const originReferenceFiber = referenceFiber;
   while (referenceFiber) {
@@ -120,12 +121,90 @@ const getElementInspect = (element) => {
     title
   };
 };
+const getParentElement = (element) => {
+  let parent = element;
+  while (parent && parent.tagName !== "HTML") {
+    if (parent.dataset.miaodaComponentName) {
+      return parent;
+    }
+    const fiber = getElementFiberUpward(parent);
+    const parentFiber = parent.parentElement ? getElementFiberUpward(parent.parentElement) : void 0;
+    const referenceFiber = getReferenceFiber(fiber);
+    const parentReferenceFiber = parentFiber ? getReferenceFiber(parentFiber) : null;
+    const currentName = referenceFiber == null ? void 0 : referenceFiber.pendingProps["data-miaoda-component-name"];
+    const parentName = parentReferenceFiber ? parentReferenceFiber.pendingProps["data-miaoda-component-name"] : null;
+    if (currentName && currentName !== parentName) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return;
+};
+const extractPropsFromFiber = (fiber) => {
+  if (!(fiber == null ? void 0 : fiber.memoizedProps)) return {};
+  const filteredProps = {};
+  const internalKeys = ["key", "ref", "__self", "__source", "className", "style"];
+  const isSerializable = (value) => {
+    if (value === null || value === void 0) return true;
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return true;
+    if (Array.isArray(value)) return value.every(isSerializable);
+    if (typeof value === "object") {
+      try {
+        JSON.stringify(value);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+    return false;
+  };
+  Object.keys(fiber.memoizedProps).forEach((key) => {
+    var _a;
+    if (!internalKeys.includes(key) && !key.startsWith("__") && !key.startsWith("data-")) {
+      const value = fiber.memoizedProps[key];
+      if (key === "children") {
+        if (typeof value === "string" || typeof value === "number") {
+          filteredProps[key] = value;
+        }
+      } else if (React.isValidElement(value)) {
+        const vProps = (_a = value == null ? void 0 : value.props) != null ? _a : {};
+        const importSource = vProps["data-miaoda-import-source"];
+        const elementName = vProps["data-miaoda-component-name"];
+        if (importSource === "lucide-react" && elementName) {
+          const name = elementName.includes(".") ? elementName.split(".").pop() : elementName;
+          filteredProps[key] = { __miaoda_icon__: { source: "lucide-react", name } };
+        }
+      } else if (isSerializable(value)) {
+        if (Array.isArray(value)) {
+          filteredProps[key] = value.slice(0, 10);
+        } else if (typeof value === "object" && value !== null) {
+          const obj = value;
+          const _keys = Object.keys(obj);
+          if (_keys.length <= 10) {
+            filteredProps[key] = value;
+          } else {
+            const limitedObj = {};
+            _keys.slice(0, 10).forEach((k) => {
+              limitedObj[k] = obj[k];
+            });
+            filteredProps[key] = limitedObj;
+          }
+        } else {
+          filteredProps[key] = value;
+        }
+      }
+    }
+  });
+  return filteredProps;
+};
 export {
+  extractPropsFromFiber,
   getCodeInfoFromDebugSource,
   getCodeInfoFromFiber,
   getCodeInfoFromProps,
   getElementCodeInfo,
   getElementInspect,
   getNamedFiber,
+  getParentElement,
   getReferenceFiber
 };