@lark-apaas/miaoda-inspector 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/es/MiaodaInspector/MiaodaInspector.mjs

@@ -6,6 +6,12 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { Inspector } from "../Inspector";
 import { ClickOverlay } from "../Inspector/Overlay";
+import {
+  extractPropsFromFiber,
+  getElementCodeInfo,
+  getElementInspect,
+  getParentElement
+} from "../Inspector/utils";
 import {
   cx,
   postMessage,
@@ -23,6 +29,7 @@ import {
 } from "../utils";
 import "./MiaodaInspector.css";
 import { getAllStyleConfigs } from "../utils/config-mapper";
+import { isAntdText, isNativeElementName } from "../utils/element-guards";
 function safeClassName(el) {
   const cn = el == null ? void 0 : el.className;
   if (typeof cn === "string") {
@@ -34,7 +41,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 (!isNativeElementName(componentName) && !isAntdText(element, componentName)) {
     return {
       hasOnlyTextNodes: false,
       textContent: null
@@ -42,9 +55,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,
@@ -80,6 +91,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}`;
@@ -101,6 +129,195 @@ function MiaodaInspector(props) {
   const mouseenter = useCallback(() => {
     setInBody(true);
   }, []);
+  const updateClickOverlay = useCallback((element, title, id) => {
+    var _a;
+    (_a = clickOverlayRef.current) == null ? void 0 : _a.remove();
+    clickOverlayRef.current = null;
+    const clickOverlay = new ClickOverlay({
+      positionUpdate: () => {
+        var _a2;
+        const el = ((_a2 = selectedElementMap.get(id)) == null ? void 0 : _a2.element) || element;
+        const _coords = getElementCoordinates(el);
+        postMessage({
+          type: "ElementResize",
+          data: __spreadValues({
+            elementId: id
+          }, _coords)
+        });
+      },
+      onElementRebind: (newEl) => {
+        const _selected = selectedElementMap.get(id);
+        if (_selected) {
+          _selected.element = newEl;
+        }
+        const _coords = getElementCoordinates(newEl);
+        postMessage({
+          type: "ElementResize",
+          data: __spreadValues({
+            elementId: id
+          }, _coords)
+        });
+      }
+    });
+    clickOverlayRef.current = clickOverlay;
+    clickOverlay.highlight(element, title, id);
+  }, []);
+  const selectInspectorElement = 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 = calculateFontSizeInfo(element, name, canUseNewInspector.current, styleConfigs);
+    const fontWeightInfo = calculateFontWeightInfo(element, name, canUseNewInspector.current, styleConfigs);
+    const borderRadiusInfo = calculateBorderRadiusInfo(
+      element,
+      name,
+      canUseNewInspector.current,
+      styleConfigs
+    );
+    const borderWidthInfo = calculateBorderWidthInfo(element, name, canUseNewInspector.current, styleConfigs);
+    const textAlignInfo = calculateTextAlignInfo(element, name, canUseNewInspector.current, styleConfigs);
+    const paddingInfo = calculatePaddingInfo(element, name, canUseNewInspector.current, styleConfigs);
+    const marginInfo = calculateMarginInfo(element, name, canUseNewInspector.current, styleConfigs);
+    const colorInfo = calculateColorInfo(element, name, canUseNewInspector.current, styleConfigs);
+    const borderColorInfo = calculateBorderColorInfo(element, name, canUseNewInspector.current, styleConfigs);
+    const backgroundColorInfo = 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 = () => {
+        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
+        }));
+      }
+    }
+    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 = useCallback(
+    (elementId) => {
+      const selectedElement = selectedElementMap.get(elementId);
+      if (!selectedElement || !selectedElement.element) {
+        return;
+      }
+      const htmlElementParent = selectedElement.element.parentElement;
+      if (!htmlElementParent) {
+        return;
+      }
+      const targetElement = getParentElement(htmlElementParent);
+      if (!targetElement) {
+        return;
+      }
+      const codeInfo = getElementCodeInfo(targetElement);
+      const { fiber, name, title } = getElementInspect(targetElement);
+      selectInspectorElement({
+        element: targetElement,
+        fiber,
+        codeInfo,
+        name,
+        title,
+        componentProps: extractPropsFromFiber(fiber)
+      });
+    },
+    [selectInspectorElement]
+  );
+  const handleCodeInfo = 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 = useCallback(
     (event) => {
       var _a, _b;
@@ -168,9 +385,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,9 +422,114 @@ function MiaodaInspector(props) {
             }
           };
         }
+      } else if (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 (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 (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 (isIncomingMessage(data, "SelectParent")) {
+        const { elementId } = data.data;
+        selectParent(elementId);
+      } else if (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]
   );
   useEffect(() => {
     document.body.addEventListener("mouseleave", mouseleave, false);
@@ -240,175 +560,14 @@ function MiaodaInspector(props) {
     postMessage({
       type: "PageMounted",
       data: {
-        version: "0.1.0-alpha.5",
-        theme: props.theme
-      }
-    });
-  }, []);
-  const selectInspectorElement = useCallback((params) => {
-    var _a, _b;
-    const { codeInfo, element, name, title } = params;
-    const coords = getElementCoordinates(element);
-    const textInfo = analyzeTextOnlyNode(
-      element,
-      name,
-      canUseNewInspector.current
-    );
-    const fontSizeInfo = calculateFontSizeInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const fontWeightInfo = calculateFontWeightInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const borderRadiusInfo = calculateBorderRadiusInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const borderWidthInfo = calculateBorderWidthInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const textAlignInfo = calculateTextAlignInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const paddingInfo = calculatePaddingInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const marginInfo = calculateMarginInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const colorInfo = calculateColorInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const backgroundColorInfo = calculateBackgroundColorInfo(
-      element,
-      name,
-      canUseNewInspector.current,
-      styleConfigs
-    );
-    const borderColorInfo = 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.7",
+        feature: {
+          selectParent: true,
+          reverseSelect: true
         }
-      });
-    }
-    if (textInfo.hasOnlyTextNodes && canUseNewInspector.current) {
-      element.setAttribute("contenteditable", "true");
-      element.focus();
-      const TextUpdate = () => {
-        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
-        }));
       }
-    }
-    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 ClickOverlay(() => {
-      const _coords = getElementCoordinates(element);
-      postMessage({
-        type: "ElementResize",
-        data: __spreadValues({
-          elementId: id
-        }, _coords)
-      });
     });
-    clickOverlayRef.current = clickOverlay;
-    clickOverlay.highlight(element, title);
   }, []);
-  const handleCodeInfo = 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__ */ jsx(
     Inspector,
     {