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

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

@@ -0,0 +1,177 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-I4E63NIC.mjs";
+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
+  };
+}
+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, __spreadProps(__spreadValues({}, config), {
+    tailwindPattern
+  }));
+}
+const calculateFontSizeInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle(
+  "fontSize",
+  element,
+  componentName,
+  canUseNewInspector,
+  styleConfigs
+);
+const calculateFontWeightInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle(
+  "fontWeight",
+  element,
+  componentName,
+  canUseNewInspector,
+  styleConfigs
+);
+const calculateBorderRadiusInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle(
+  "borderRadius",
+  element,
+  componentName,
+  canUseNewInspector,
+  styleConfigs
+);
+const calculateBorderWidthInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle(
+  "borderWidth",
+  element,
+  componentName,
+  canUseNewInspector,
+  styleConfigs
+);
+const calculateTextAlignInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle(
+  "textAlign",
+  element,
+  componentName,
+  canUseNewInspector,
+  styleConfigs
+);
+const calculatePaddingInfo = (element, componentName, canUseNewInspector, styleConfigs) => {
+  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  return calculateStyleProperty(element, styleConfigs.padding);
+};
+const calculateMarginInfo = (element, componentName, canUseNewInspector, styleConfigs) => {
+  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  return calculateStyleProperty(element, styleConfigs.margin);
+};
+const calculateColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle(
+  "color",
+  element,
+  componentName,
+  canUseNewInspector,
+  styleConfigs
+);
+const calculateBackgroundColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle(
+  "backgroundColor",
+  element,
+  componentName,
+  canUseNewInspector,
+  styleConfigs
+);
+const calculateBorderColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle(
+  "borderColor",
+  element,
+  componentName,
+  canUseNewInspector,
+  styleConfigs
+);
+export {
+  calculateBackgroundColorInfo,
+  calculateBorderColorInfo,
+  calculateBorderRadiusInfo,
+  calculateBorderWidthInfo,
+  calculateColorInfo,
+  calculateFontSizeInfo,
+  calculateFontWeightInfo,
+  calculateMarginInfo,
+  calculatePaddingInfo,
+  calculateStyle,
+  calculateTextAlignInfo,
+  rgbaToHex
+};

package/dist/lib/Inspector/Inspector.js

@@ -1,46 +1,56 @@
-"use client";
 "use strict";
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-function _export(target, all) {
+"use client";
+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)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name]
-    });
-}
-_export(exports, {
-  defaultHotkeys: function() {
-    return defaultHotkeys;
-  },
-  Inspector: function() {
-    return Inspector;
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  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 Inspector_exports = {};
+__export(Inspector_exports, {
+  Inspector: () => Inspector,
+  defaultHotkeys: () => defaultHotkeys
 });
-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
-  };
-}
+module.exports = __toCommonJS(Inspector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_hotkeys_js = __toESM(require("hotkeys-js"));
+var import_hooks = require("./hooks");
+var import_Overlay = require("./Overlay");
+var import_utils = require("./utils");
+var import_fiber = require("./utils/fiber");
 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 fiber = (0, import_fiber.getElementFiberUpward)(parent);
+    const parentFiber = parent.parentElement ? (0, import_fiber.getElementFiberUpward)(parent.parentElement) : void 0;
+    const referenceFiber = (0, import_utils.getReferenceFiber)(fiber);
+    const parentReferenceFiber = parentFiber ? (0, import_utils.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;
@@ -50,75 +60,69 @@ const getParentElement = (element) => {
   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"
-  ];
+  var _a;
+  return ((_a = navigator.platform) == null ? void 0 : _a.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)(() => {
+  const {
+    keys,
+    onHoverElement,
+    onClickElement,
+    onInspectElement,
+    active: controlledActive,
+    onActiveChange,
+    handleCodeInfo,
+    disable = true,
+    children
+  } = props;
+  const [isActive, setActive] = (0, import_react.useState)(controlledActive != null ? controlledActive : false);
+  const hotkey = keys === null ? null : (keys != null ? keys : []).join("+");
+  const overlayRef = (0, import_react.useRef)();
+  const mouseRef = (0, import_hooks.useMousePosition)({ disable });
+  (0, import_hooks.useLayoutEffect)(() => {
     if (controlledActive !== void 0) {
       setActive(controlledActive);
     }
-  }, [
-    controlledActive
-  ]);
-  const activate = (0, _hooks.useEffectEvent)(() => {
-    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(true);
+  }, [controlledActive]);
+  const activate = (0, import_hooks.useEffectEvent)(() => {
+    onActiveChange == null ? void 0 : onActiveChange(true);
     if (controlledActive === void 0) {
       setActive(true);
     }
   });
-  const deactivate = (0, _hooks.useEffectEvent)(() => {
-    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
+  const deactivate = (0, import_hooks.useEffectEvent)(() => {
+    onActiveChange == null ? void 0 : onActiveChange(false);
     if (controlledActive === void 0) {
       setActive(false);
     }
   });
-  const handleHoverElement = (0, _hooks.useEffectEvent)((element) => {
-    var _overlay_inspect;
+  const handleHoverElement = (0, import_hooks.useEffectEvent)((element) => {
+    var _a;
     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({
+    const codeInfo = (0, import_utils.getElementCodeInfo)(targetElement);
+    const relativePath = codeInfo == null ? void 0 : codeInfo.relativePath;
+    const absolutePath = codeInfo == null ? void 0 : codeInfo.absolutePath;
+    const { fiber, name, title } = (0, import_utils.getElementInspect)(targetElement);
+    (_a = overlay == null ? void 0 : overlay.inspect) == null ? void 0 : _a.call(overlay, [targetElement], title, relativePath != null ? relativePath : absolutePath);
+    onHoverElement == null ? void 0 : onHoverElement({
       element: targetElement,
       fiber,
       codeInfo,
       name
     });
   });
-  const handleClickElement = (0, _hooks.useEffectEvent)((element) => {
+  const handleClickElement = (0, import_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({
+    const codeInfo = (0, import_utils.getElementCodeInfo)(targetElement);
+    const { fiber, name, title } = (0, import_utils.getElementInspect)(targetElement);
+    onClickElement == null ? void 0 : onClickElement({
       element: targetElement,
       fiber,
       codeInfo,
@@ -126,7 +130,7 @@ const Inspector = (props) => {
       title
     });
     if (fiber && codeInfo) {
-      onInspectElement === null || onInspectElement === void 0 ? void 0 : onInspectElement({
+      onInspectElement == null ? void 0 : onInspectElement({
         element: targetElement,
         fiber,
         codeInfo,
@@ -135,49 +139,45 @@ const Inspector = (props) => {
       });
     }
   });
-  const startInspect = (0, _hooks.useEffectEvent)(() => {
-    if (overlayRef.current || disable)
-      return;
-    const overlay = new _Overlay.Overlay(handleCodeInfo);
+  const startInspect = (0, import_hooks.useEffectEvent)(() => {
+    if (overlayRef.current || disable) return;
+    const overlay = new import_Overlay.Overlay(handleCodeInfo);
     overlayRef.current = overlay;
-    (0, _hotkeysjs.default)(`esc`, deactivate);
-    const stopCallback = (0, _utils.setupHighlighter)({
+    (0, import_hotkeys_js.default)(`esc`, deactivate);
+    const stopCallback = (0, import_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);
+    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();
+  const stopInspect = (0, import_hooks.useEffectEvent)(() => {
+    var _a;
+    (_a = overlayRef.current) == null ? void 0 : _a.remove();
     overlayRef.current = void 0;
-    _hotkeysjs.default.unbind(`esc`, deactivate);
+    import_hotkeys_js.default.unbind(`esc`, deactivate);
   });
-  (0, _react.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (isActive) {
       startInspect();
     } else {
       stopInspect();
     }
     return stopInspect;
-  }, [
-    isActive
-  ]);
-  (0, _react.useEffect)(() => {
+  }, [isActive]);
+  (0, import_react.useEffect)(() => {
     const handleScroll = () => {
-      var _overlayRef_current;
-      (_overlayRef_current = overlayRef.current) === null || _overlayRef_current === void 0 ? void 0 : _overlayRef_current.clearRect();
+      var _a;
+      (_a = overlayRef.current) == null ? void 0 : _a.clearRect();
     };
     window.addEventListener("scroll", handleScroll, true);
     return () => {
       window.removeEventListener("scroll", handleScroll, true);
     };
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     const handleHotKeys = () => {
       if (overlayRef.current) {
         deactivate();
@@ -187,17 +187,12 @@ const Inspector = (props) => {
     };
     const bindKey = hotkey === null || disable ? null : hotkey || defaultHotkeys().join("+");
     if (bindKey) {
-      (0, _hotkeysjs.default)(bindKey, handleHotKeys);
+      (0, import_hotkeys_js.default)(bindKey, handleHotKeys);
       return () => {
-        _hotkeysjs.default.unbind(bindKey, handleHotKeys);
+        import_hotkeys_js.default.unbind(bindKey, handleHotKeys);
       };
     }
     return;
-  }, [
-    hotkey,
-    disable
-  ]);
-  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-    children: children !== null && children !== void 0 ? children : null
-  });
+  }, [hotkey, disable]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: children != null ? children : null });
 };