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

package/dist/es/MiaodaInspector/MiaodaInspector.mjs

@@ -0,0 +1,427 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-I4E63NIC.mjs";
+import { 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 ? void 0 : el.className;
+  if (typeof cn === "string") {
+    return cn;
+  }
+  if (typeof (cn == null ? 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 ? 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 = (() => {
+  return (localStorage == null ? void 0 : localStorage.getItem("miaoda-inspector-inner")) === "true";
+})();
+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) => {
+      var _a, _b;
+      const { data } = event;
+      if (isIncomingMessage(data, "InitConfig")) {
+        const { inspectorActive, userToken, appId, inspectorVersion } = data.data;
+        if (inspectorActive !== void 0) {
+          setActive(inspectorActive);
+          if (inspectorActive === false) {
+            (_a = clickOverlayRef.current) == null ? void 0 : _a.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")) {
+        const { keepModifications = false } = data.data;
+        (_b = clickOverlayRef.current) == null ? void 0 : _b.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 _a;
+      (_a = clickOverlayRef.current) == null ? void 0 : _a.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-alpha.1",
+        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: {}
+        }
+      });
+    }
+    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,
+    {
+      disable: false,
+      active,
+      onClickElement: selectInspectorElement,
+      handleCodeInfo,
+      onActiveChange: (newActive) => {
+        setActive(newActive);
+      }
+    }
+  );
+}
+export {
+  MiaodaInspector
+};

package/dist/es/MiaodaInspector/index.mjs

@@ -0,0 +1,5 @@
+import "../chunk-I4E63NIC.mjs";
+import { MiaodaInspector } from "./MiaodaInspector";
+export {
+  MiaodaInspector
+};

package/dist/es/chunk-I4E63NIC.mjs

@@ -0,0 +1,24 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+export {
+  __spreadValues,
+  __spreadProps
+};