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

package/dist/es/index.js

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

package/dist/es/types/iframe-events.js

@@ -0,0 +1 @@
+export {};

package/dist/es/types/index.js

@@ -0,0 +1 @@
+export { InitConfigMessage, ClearSelectedMessage, EditTextMessage, EditStyleMessage, EditClassNameMessage, OutgoingMessage, PageMountedMessage, TextUpdateMessage, SelectInspectorElementMessage, IncomingMessage, InspectorInfo } from "./iframe-events";

package/dist/es/utils/config-mapper.js

@@ -0,0 +1,163 @@
+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;
+}
+function getColorStyleCalculationConfig(config, propertyName) {
+  const prefixMap = {
+    color: "text",
+    backgroundColor: "bg",
+    borderColor: "border"
+  };
+  const prefix = prefixMap[propertyName];
+  if (!prefix) {
+    throw new Error(`Unsupported color property: ${propertyName}`);
+  }
+  const map = {};
+  for (const [tokenName, colorValue] of Object.entries(config.tokens)) {
+    if (!tokenName.includes("-") || !colorValue.startsWith("#")) {
+      continue;
+    }
+    const tailwindClass = `${prefix}-${tokenName}`;
+    map[colorValue.toLowerCase()] = tailwindClass;
+  }
+  const colorConfig = config.common[propertyName];
+  if (colorConfig.type === "color-picker") {
+    for (const colorGroup of colorConfig.recommendColors) {
+      for (const colorOption of colorGroup.options) {
+        if (colorOption.type === "tailwind" && colorOption.rawValue) {
+          map[colorOption.rawValue.toLowerCase()] = colorOption.value;
+        }
+      }
+    }
+  }
+  let cssProperty;
+  if (propertyName === "color") {
+    cssProperty = "color";
+  } else if (propertyName === "backgroundColor") {
+    cssProperty = "backgroundColor";
+  } else {
+    cssProperty = "borderColor";
+  }
+  return {
+    cssProperty,
+    tailwindPrefix: prefix,
+    map,
+    transformValue: (value) => value.toLowerCase()
+  };
+}
+export function getStyleCalculationConfig(config, propertyName) {
+  const uiComponent = config.common[propertyName];
+  if (uiComponent.type === "color-picker") {
+    return getColorStyleCalculationConfig(config, propertyName);
+  }
+  if (uiComponent.type !== "select" && uiComponent.type !== "spacing") {
+    throw new Error(`Unsupported UI component type: ${uiComponent.type} for property: ${propertyName}`);
+  }
+  const map = {};
+  for (const option of uiComponent.options) {
+    const numericValue = parseInt(option.rawValue, 10);
+    if (!Number.isNaN(numericValue)) {
+      map[numericValue] = option.value;
+    } else {
+      map[option.rawValue] = option.value;
+    }
+  }
+  const configMap = {
+    fontSize: {
+      cssProperty: "fontSize",
+      tailwindPrefix: "text",
+      tolerance: 2
+    },
+    fontWeight: {
+      cssProperty: "fontWeight",
+      tailwindPrefix: "font",
+      transformValue: (value) => parseInt(value, 10)
+    },
+    borderRadius: {
+      cssProperty: "borderRadius",
+      tailwindPrefix: "rounded"
+    },
+    borderWidth: {
+      cssProperty: "borderWidth",
+      tailwindPrefix: "border"
+    },
+    textAlign: {
+      cssProperty: "textAlign",
+      tailwindPrefix: "text",
+      transformValue: (value) => value
+    },
+    padding: {
+      cssProperty: "padding",
+      tailwindPrefix: "p",
+      skipTailwind: true
+    },
+    margin: {
+      cssProperty: "margin",
+      tailwindPrefix: "m",
+      skipTailwind: true
+    }
+  };
+  const baseConfig = configMap[propertyName];
+  if (!baseConfig) {
+    throw new Error(`Unknown property: ${propertyName}`);
+  }
+  return _object_spread_props(_object_spread({}, baseConfig), {
+    map
+  });
+}
+export function getAllStyleConfigs(config) {
+  const result = {};
+  const keys = Object.keys(config.common);
+  for (const key of keys) {
+    result[key] = getStyleCalculationConfig(config, key);
+  }
+  return result;
+}

package/dist/es/utils/css.js

@@ -0,0 +1,5 @@
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cx(...args) {
+  return twMerge(clsx(...args));
+}

package/dist/es/utils/index.js

@@ -0,0 +1,3 @@
+export { getPreviewParentOrigin, postMessage, isIncomingMessage, isOutgoingMessage } from "./origin";
+export { cx } from "./css";
+export { calculateFontSizeInfo, calculateFontWeightInfo, calculateBorderRadiusInfo, calculateBorderWidthInfo, calculateTextAlignInfo, calculatePaddingInfo, calculateMarginInfo, calculateColorInfo, calculateBackgroundColorInfo, calculateBorderColorInfo } from "./style-calculator";

package/dist/es/utils/origin.js

@@ -0,0 +1,19 @@
+export function getPreviewParentOrigin() {
+  const { origin } = window.location;
+  if (origin.includes("feishuapp.cn")) {
+    return "https://miaoda.feishu.cn";
+  }
+  if (origin.includes("fsapp.kundou.cn")) {
+    return "https://miaoda.feishu-pre.cn";
+  }
+  return "https://miaoda.feishu-boe.cn";
+}
+export function postMessage(message, targetOrigin) {
+  window.parent.postMessage(message, targetOrigin !== null && targetOrigin !== void 0 ? targetOrigin : getPreviewParentOrigin());
+}
+export function isOutgoingMessage(msg, type) {
+  return msg.type === type;
+}
+export function isIncomingMessage(msg, type) {
+  return msg.type === type;
+}

package/dist/es/utils/style-calculator.js

@@ -0,0 +1,158 @@
+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;
+}
+export function rgbaToHex(rgba) {
+  const match = rgba.match(/rgba?\(([^)]+)\)/);
+  if (!match)
+    return rgba;
+  const values = match[1].split(",").map((v) => v.trim());
+  const r = parseInt(values[0], 10);
+  const g = parseInt(values[1], 10);
+  const b = parseInt(values[2], 10);
+  const toHex = (n) => {
+    const hex = n.toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  if (values.length === 4) {
+    const a = parseFloat(values[3]);
+    if (!Number.isNaN(a) && a < 1) {
+      const alphaHex = Math.round(a * 255).toString(16);
+      const alphaHexStr = alphaHex.length === 1 ? `0${alphaHex}` : alphaHex;
+      return `#${toHex(r)}${toHex(g)}${toHex(b)}${alphaHexStr}`;
+    }
+  }
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function isValidElement(element, componentName, canUseNewInspector) {
+  return !!(element && componentName && componentName[0] !== componentName[0].toUpperCase() && canUseNewInspector && !(element instanceof SVGElement));
+}
+function isValidElementWithComponent(element, componentName, canUseNewInspector) {
+  return !!(element && componentName && canUseNewInspector && !(element instanceof SVGElement));
+}
+function shouldBeInherited(element, cssProperty, tailwindPattern) {
+  const hasDirectStyle = element.style[cssProperty] !== "";
+  const hasTailwindClass = element.className.match(tailwindPattern);
+  return !hasDirectStyle && !hasTailwindClass;
+}
+function findClosestMatch(value, map, tolerance = 2) {
+  let closestClass = Object.values(map)[0];
+  let minDiff = Infinity;
+  for (const [px, className] of Object.entries(map)) {
+    const diff = Math.abs(value - Number(px));
+    if (diff < minDiff) {
+      minDiff = diff;
+      closestClass = className;
+    }
+  }
+  return {
+    className: minDiff <= tolerance ? closestClass : `raw:${value}`,
+    isExact: minDiff <= tolerance
+  };
+}
+function calculateStyleProperty(element, config) {
+  const computedStyle = window.getComputedStyle(element);
+  const currentValue = computedStyle[config.cssProperty];
+  if (!currentValue) {
+    return null;
+  }
+  let tailwindClassName;
+  if (config.cssProperty === "textAlign" || config.skipTailwind) {
+    tailwindClassName = config.map[currentValue] || `raw:${currentValue}`;
+  } else if (config.cssProperty === "color" || config.cssProperty === "backgroundColor" || config.cssProperty === "borderColor") {
+    const normalizedColor = rgbaToHex(currentValue);
+    const colorValue = config.transformValue ? config.transformValue(normalizedColor) : normalizedColor;
+    tailwindClassName = config.map[colorValue] || `raw:${normalizedColor}`;
+  } else {
+    const numericValue = config.transformValue ? config.transformValue(currentValue) : parseFloat(currentValue);
+    const { className } = findClosestMatch(numericValue, config.map, config.tolerance);
+    tailwindClassName = className;
+  }
+  const inherited = config.tailwindPattern ? shouldBeInherited(element, config.cssProperty, config.tailwindPattern) : false;
+  return {
+    value: currentValue,
+    inherited,
+    tailwindClassName
+  };
+}
+export function calculateStyle(styleName, element, componentName, canUseNewInspector, styleConfigs) {
+  if ((styleName === "fontSize" || styleName === "fontWeight" || styleName === "color" || styleName === "textAlign") && !isValidElement(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  const config = styleConfigs[styleName];
+  const tailwindPattern = new RegExp(`\\b${config.tailwindPrefix}-(${Object.keys(config.map).join("|")})\\b`);
+  return calculateStyleProperty(element, _object_spread_props(_object_spread({}, config), {
+    tailwindPattern
+  }));
+}
+export const calculateFontSizeInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("fontSize", element, componentName, canUseNewInspector, styleConfigs);
+export const calculateFontWeightInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("fontWeight", element, componentName, canUseNewInspector, styleConfigs);
+export const calculateBorderRadiusInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderRadius", element, componentName, canUseNewInspector, styleConfigs);
+export const calculateBorderWidthInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderWidth", element, componentName, canUseNewInspector, styleConfigs);
+export const calculateTextAlignInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("textAlign", element, componentName, canUseNewInspector, styleConfigs);
+export const calculatePaddingInfo = (element, componentName, canUseNewInspector, styleConfigs) => {
+  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  return calculateStyleProperty(element, styleConfigs.padding);
+};
+export const calculateMarginInfo = (element, componentName, canUseNewInspector, styleConfigs) => {
+  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  return calculateStyleProperty(element, styleConfigs.margin);
+};
+export const calculateColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("color", element, componentName, canUseNewInspector, styleConfigs);
+export const calculateBackgroundColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("backgroundColor", element, componentName, canUseNewInspector, styleConfigs);
+export const calculateBorderColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderColor", element, componentName, canUseNewInspector, styleConfigs);

package/dist/lib/Inspector/Inspector.js

@@ -0,0 +1,203 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  defaultHotkeys: function() {
+    return defaultHotkeys;
+  },
+  Inspector: function() {
+    return Inspector;
+  }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _hotkeysjs = /* @__PURE__ */ _interop_require_default(require("hotkeys-js"));
+const _hooks = require("./hooks");
+const _Overlay = require("./Overlay");
+const _utils = require("./utils");
+const _fiber = require("./utils/fiber");
+function _interop_require_default(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+const getParentElement = (element) => {
+  let parent = element;
+  while (parent && parent.tagName !== "HTML") {
+    if (parent.dataset.miaodaComponentName) {
+      return parent;
+    }
+    const fiber = (0, _fiber.getElementFiberUpward)(parent);
+    const parentFiber = parent.parentElement ? (0, _fiber.getElementFiberUpward)(parent.parentElement) : void 0;
+    const referenceFiber = (0, _utils.getReferenceFiber)(fiber);
+    const parentReferenceFiber = parentFiber ? (0, _utils.getReferenceFiber)(parentFiber) : null;
+    const currentName = referenceFiber === null || referenceFiber === void 0 ? 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 _navigator_platform;
+  return ((_navigator_platform = navigator.platform) === null || _navigator_platform === void 0 ? void 0 : _navigator_platform.startsWith("Mac")) ? [
+    "Ctrl",
+    "Shift",
+    "Command",
+    "C"
+  ] : [
+    "Ctrl",
+    "Shift",
+    "Alt",
+    "C"
+  ];
+};
+const Inspector = (props) => {
+  const { keys, onHoverElement, onClickElement, onInspectElement, active: controlledActive, onActiveChange, handleCodeInfo, disable = true, children } = props;
+  const [isActive, setActive] = (0, _react.useState)(controlledActive !== null && controlledActive !== void 0 ? controlledActive : false);
+  const hotkey = keys === null ? null : (keys !== null && keys !== void 0 ? keys : []).join("+");
+  const overlayRef = (0, _react.useRef)();
+  const mouseRef = (0, _hooks.useMousePosition)({
+    disable
+  });
+  (0, _hooks.useLayoutEffect)(() => {
+    if (controlledActive !== void 0) {
+      setActive(controlledActive);
+    }
+  }, [
+    controlledActive
+  ]);
+  const activate = (0, _hooks.useEffectEvent)(() => {
+    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(true);
+    if (controlledActive === void 0) {
+      setActive(true);
+    }
+  });
+  const deactivate = (0, _hooks.useEffectEvent)(() => {
+    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
+    if (controlledActive === void 0) {
+      setActive(false);
+    }
+  });
+  const handleHoverElement = (0, _hooks.useEffectEvent)((element) => {
+    var _overlay_inspect;
+    const overlay = overlayRef.current;
+    const targetElement = getParentElement(element);
+    if (!targetElement) {
+      return;
+    }
+    const codeInfo = (0, _utils.getElementCodeInfo)(targetElement);
+    const relativePath = codeInfo === null || codeInfo === void 0 ? void 0 : codeInfo.relativePath;
+    const absolutePath = codeInfo === null || codeInfo === void 0 ? void 0 : codeInfo.absolutePath;
+    const { fiber, name, title } = (0, _utils.getElementInspect)(targetElement);
+    overlay === null || overlay === void 0 ? void 0 : (_overlay_inspect = overlay.inspect) === null || _overlay_inspect === void 0 ? void 0 : _overlay_inspect.call(overlay, [
+      targetElement
+    ], title, relativePath !== null && relativePath !== void 0 ? relativePath : absolutePath);
+    onHoverElement === null || onHoverElement === void 0 ? void 0 : onHoverElement({
+      element: targetElement,
+      fiber,
+      codeInfo,
+      name
+    });
+  });
+  const handleClickElement = (0, _hooks.useEffectEvent)((element) => {
+    const targetElement = getParentElement(element);
+    if (!targetElement) {
+      return;
+    }
+    const codeInfo = (0, _utils.getElementCodeInfo)(targetElement);
+    const { fiber, name, title } = (0, _utils.getElementInspect)(targetElement);
+    onClickElement === null || onClickElement === void 0 ? void 0 : onClickElement({
+      element: targetElement,
+      fiber,
+      codeInfo,
+      name,
+      title
+    });
+    if (fiber && codeInfo) {
+      onInspectElement === null || onInspectElement === void 0 ? void 0 : onInspectElement({
+        element: targetElement,
+        fiber,
+        codeInfo,
+        name,
+        title
+      });
+    }
+  });
+  const startInspect = (0, _hooks.useEffectEvent)(() => {
+    if (overlayRef.current || disable)
+      return;
+    const overlay = new _Overlay.Overlay(handleCodeInfo);
+    overlayRef.current = overlay;
+    (0, _hotkeysjs.default)(`esc`, deactivate);
+    const stopCallback = (0, _utils.setupHighlighter)({
+      onPointerOver: handleHoverElement,
+      onClick: handleClickElement
+    });
+    overlay.setRemoveCallback(stopCallback);
+    const initPoint = mouseRef.current;
+    const initElement = document.elementFromPoint(initPoint.x, initPoint.y);
+    if (initElement)
+      handleHoverElement(initElement);
+  });
+  const stopInspect = (0, _hooks.useEffectEvent)(() => {
+    var _overlayRef_current;
+    (_overlayRef_current = overlayRef.current) === null || _overlayRef_current === void 0 ? void 0 : _overlayRef_current.remove();
+    overlayRef.current = void 0;
+    _hotkeysjs.default.unbind(`esc`, deactivate);
+  });
+  (0, _react.useEffect)(() => {
+    if (isActive) {
+      startInspect();
+    } else {
+      stopInspect();
+    }
+    return stopInspect;
+  }, [
+    isActive
+  ]);
+  (0, _react.useEffect)(() => {
+    const handleScroll = () => {
+      var _overlayRef_current;
+      (_overlayRef_current = overlayRef.current) === null || _overlayRef_current === void 0 ? void 0 : _overlayRef_current.clearRect();
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    const handleHotKeys = () => {
+      if (overlayRef.current) {
+        deactivate();
+      } else {
+        activate();
+      }
+    };
+    const bindKey = hotkey === null || disable ? null : hotkey || defaultHotkeys().join("+");
+    if (bindKey) {
+      (0, _hotkeysjs.default)(bindKey, handleHotKeys);
+      return () => {
+        _hotkeysjs.default.unbind(bindKey, handleHotKeys);
+      };
+    }
+    return;
+  }, [
+    hotkey,
+    disable
+  ]);
+  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+    children: children !== null && children !== void 0 ? children : null
+  });
+};