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

package/dist/lib/Inspector/Overlay.js

@@ -291,14 +291,8 @@ class Overlay {
       const box = (0, import_utils.getNestedBoundingClientRect)(element, this.window);
       const dims = (0, import_utils.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);
@@ -313,10 +307,7 @@ class Overlay {
     } else {
       this.tip.updateText(name);
     }
-    const tipBounds = (0, import_utils.getNestedBoundingClientRect)(
-      this.tipBoundsWindow.document.documentElement,
-      this.window
-    );
+    const tipBounds = (0, import_utils.getNestedBoundingClientRect)(this.tipBoundsWindow.document.documentElement, this.window);
     this.tip.updatePosition(
       {
         top: outerBox.top,
@@ -342,10 +333,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;
@@ -363,7 +359,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);
@@ -379,16 +385,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();
     }
@@ -396,6 +409,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;
@@ -408,20 +437,11 @@ class ClickOverlay {
     const box = (0, import_utils.getNestedBoundingClientRect)(element, this.window);
     const dims = (0, import_utils.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 = (0, import_utils.getNestedBoundingClientRect)(
-      this.tipBoundsWindow.document.documentElement,
-      this.window
-    );
+    const tipBounds = (0, import_utils.getNestedBoundingClientRect)(this.tipBoundsWindow.document.documentElement, this.window);
     if (box.width === 0 || box.height === 0) {
       this.tip.invisible();
     }
@@ -445,4 +465,13 @@ 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);
+    }
+  }
 }

package/dist/lib/Inspector/utils/inspect.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,18 +17,29 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var inspect_exports = {};
 __export(inspect_exports, {
+  extractPropsFromFiber: () => extractPropsFromFiber,
   getCodeInfoFromDebugSource: () => getCodeInfoFromDebugSource,
   getCodeInfoFromFiber: () => getCodeInfoFromFiber,
   getCodeInfoFromProps: () => getCodeInfoFromProps,
   getElementCodeInfo: () => getElementCodeInfo,
   getElementInspect: () => getElementInspect,
   getNamedFiber: () => getNamedFiber,
+  getParentElement: () => getParentElement,
   getReferenceFiber: () => getReferenceFiber
 });
 module.exports = __toCommonJS(inspect_exports);
+var import_react = __toESM(require("react"));
 var import_fiber = require("./fiber");
 const getCodeInfoFromDebugSource = (fiber) => {
   var _a, _b;
@@ -90,7 +103,7 @@ const getReferenceFiber = (baseFiber) => {
   const directParent = (0, import_fiber.getDirectParentFiber)(baseFiber);
   if (!directParent) return void 0;
   const isParentNative = (0, import_fiber.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) {
@@ -141,3 +154,79 @@ const getElementInspect = (element) => {
     title
   };
 };
+const getParentElement = (element) => {
+  let parent = element;
+  while (parent && parent.tagName !== "HTML") {
+    if (parent.dataset.miaodaComponentName) {
+      return parent;
+    }
+    const fiber = (0, import_fiber.getElementFiberUpward)(parent);
+    const parentFiber = parent.parentElement ? (0, import_fiber.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 (import_react.default.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;
+};