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

package/dist/es/MiaodaInspector/MiaodaInspector.js

@@ -0,0 +1,397 @@
+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 _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;
+      }));
+    }
+    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 target;
+}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Inspector } from "../Inspector";
+import { ClickOverlay } from "../Inspector/Overlay";
+import { cx, postMessage, isIncomingMessage, calculateFontSizeInfo, calculateFontWeightInfo, calculateBorderRadiusInfo, calculateBorderWidthInfo, calculateTextAlignInfo, calculatePaddingInfo, calculateMarginInfo, calculateColorInfo, calculateBackgroundColorInfo, calculateBorderColorInfo } from "../utils";
+import "./MiaodaInspector.css";
+import { getAllStyleConfigs } from "../utils/config-mapper";
+function safeClassName(el) {
+  const cn = el === null || el === void 0 ? void 0 : el.className;
+  if (typeof cn === "string") {
+    return cn;
+  }
+  if (typeof (cn === null || cn === void 0 ? void 0 : cn.baseVal) === "string") {
+    return cn.baseVal;
+  }
+  return "";
+}
+function analyzeTextOnlyNode(element, componentName, canUseNewInspector) {
+  if (!element || componentName && componentName[0] === componentName[0].toUpperCase() || !canUseNewInspector || element instanceof SVGElement) {
+    return {
+      hasOnlyTextNodes: false,
+      textContent: null
+    };
+  }
+  try {
+    const childNodes = Array.from(element.childNodes);
+    const textNodes = childNodes.filter((node) => node.nodeType === Node.TEXT_NODE);
+    const hasOnlyText = childNodes.length > 0 && textNodes.length === childNodes.length;
+    return {
+      hasOnlyTextNodes: hasOnlyText,
+      textContent: hasOnlyText ? element.textContent : null
+    };
+  } catch (e) {
+    console.error("Error analyzing text-only node:", e);
+  }
+  return {
+    hasOnlyTextNodes: false,
+    textContent: null
+  };
+}
+const getElementCoordinates = (element) => {
+  const boundingClientRect = element === null || element === void 0 ? 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;
+  const marginTop = computedStyle ? parseFloat(computedStyle.marginTop) || 0 : 0;
+  const marginBottom = computedStyle ? parseFloat(computedStyle.marginBottom) || 0 : 0;
+  const totalWidth = boundingClientRect ? boundingClientRect.width + marginLeft + marginRight : 0;
+  const totalHeight = boundingClientRect ? boundingClientRect.height + marginTop + marginBottom : 0;
+  const adjustedTop = boundingClientRect ? boundingClientRect.top - marginTop : 0;
+  const adjustedLeft = boundingClientRect ? boundingClientRect.left - marginLeft : 0;
+  const adjustedRight = boundingClientRect ? boundingClientRect.right + marginRight : 0;
+  const adjustedBottom = boundingClientRect ? boundingClientRect.bottom + marginBottom : 0;
+  return {
+    width: totalWidth,
+    height: totalHeight,
+    top: adjustedTop,
+    left: adjustedLeft,
+    right: adjustedRight,
+    bottom: adjustedBottom
+  };
+};
+const selectedElementMap = /* @__PURE__ */ new Map();
+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";
+})();
+export function MiaodaInspector(props) {
+  const [_active, setActive] = useState(false);
+  const [inBody, setInBody] = useState(true);
+  const active = (_active || enableInner) && inBody;
+  const canUseNewInspector = useRef(false);
+  const clickOverlayRef = useRef(null);
+  const defaultUIConfig = props.theme.themeToken;
+  const styleConfigs = getAllStyleConfigs(defaultUIConfig);
+  const mouseleave = useCallback(() => {
+    setInBody(false);
+  }, []);
+  const mouseenter = useCallback(() => {
+    setInBody(true);
+  }, []);
+  const handleMessage = useCallback((event) => {
+    const { data } = event;
+    if (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;
+        }
+      }
+      if (userToken !== void 0) {
+        window.MIAODA_BUILTIN_TTT = userToken;
+      }
+      if (appId !== void 0) {
+        window.MIAODA_APP_ID = appId;
+      }
+      postMessage({
+        type: "InspectorUIConfig",
+        data: defaultUIConfig
+      });
+      if (inspectorVersion === "2") {
+        canUseNewInspector.current = true;
+      }
+    } else if (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 (selectedElement.originalState.className && !(selectedElement.element instanceof SVGElement)) {
+              selectedElement.element.className = selectedElement.originalState.className;
+            }
+          }
+          if (selectedElement.dispose) {
+            selectedElement.dispose();
+          }
+        }
+        selectedElementMap.clear();
+      }
+    } else if (isIncomingMessage(data, "EditText")) {
+      const { elementId, textContent } = data.data;
+      const selectedElement = selectedElementMap.get(elementId);
+      if (selectedElement && selectedElement.element) {
+        selectedElement.element.textContent = textContent;
+      }
+    } else if (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);
+          }
+        }
+        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);
+            }
+          }
+        };
+        selectedElement.dispose = () => {
+          styleDispose();
+          if (existingDispose) {
+            existingDispose();
+          }
+        };
+      }
+    } else if (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);
+        }
+        element.className = 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
+  ]);
+  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();
+      clickOverlayRef.current = null;
+      postMessage({
+        type: "PageScroll",
+        data: {}
+      });
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      document.body.removeEventListener("mouseleave", mouseleave, false);
+      document.body.removeEventListener("mouseenter", mouseenter, false);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, []);
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []);
+  useEffect(() => {
+    postMessage({
+      type: "PageMounted",
+      data: {
+        version: "0.1.0",
+        theme: props.theme
+      }
+    });
+  }, []);
+  const selectInspectorElement = useCallback((params) => {
+    var _clickOverlayRef_current;
+    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: {}
+        }
+      });
+    }
+    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, _object_spread_props(_object_spread({}, _selectElement), {
+          dispose
+        }));
+      }
+    }
+    var _element_id;
+    postMessage({
+      type: "SelectInspectorElement",
+      data: _object_spread_props(_object_spread({}, codeInfo), {
+        // 移除打头的 /
+        relativePath: codeInfo.relativePath,
+        tagName: element === null || element === void 0 ? 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 : "",
+        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
+      })
+    });
+    (_clickOverlayRef_current = clickOverlayRef.current) === null || _clickOverlayRef_current === void 0 ? void 0 : _clickOverlayRef_current.remove();
+    clickOverlayRef.current = null;
+    const clickOverlay = new ClickOverlay(() => {
+      const _coords = getElementCoordinates(element);
+      postMessage({
+        type: "ElementResize",
+        data: _object_spread({
+          elementId: id
+        }, _coords)
+      });
+    });
+    clickOverlayRef.current = clickOverlay;
+    clickOverlay.highlight(element, title);
+  }, []);
+  const handleCodeInfo = 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__ */ _jsx(Inspector, {
+    disable: false,
+    active,
+    onClickElement: selectInspectorElement,
+    handleCodeInfo,
+    onActiveChange: (newActive) => {
+      setActive(newActive);
+    }
+  });
+}

package/dist/es/MiaodaInspector/index.js

@@ -0,0 +1 @@
+export { MiaodaInspector } from "./MiaodaInspector";