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

package/dist/es/config/ui-config.mjs

@@ -24,21 +24,13 @@ const defaultUIConfig = {
       type: "select",
       options: [
         { value: "font-thin", label: "\u6781\u7EC6\uFF08Thin\uFF09", rawValue: "100" },
-        {
-          value: "font-extralight",
-          label: "\u6781\u8F7B\uFF08Extra Light\uFF09",
-          rawValue: "200"
-        },
+        { value: "font-extralight", label: "\u6781\u8F7B\uFF08Extra Light\uFF09", rawValue: "200" },
         { value: "font-light", label: "\u8F7B\uFF08Light\uFF09", rawValue: "300" },
         { value: "font-normal", label: "\u5E38\u89C4\uFF08Normal\uFF09", rawValue: "400" },
         { value: "font-medium", label: "\u4E2D\u7C97\uFF08Medium\uFF09", rawValue: "500" },
         { value: "font-semibold", label: "\u534A\u7C97\uFF08Semi Bold\uFF09", rawValue: "600" },
         { value: "font-bold", label: "\u7C97\uFF08Bold\uFF09", rawValue: "700" },
-        {
-          value: "font-extrabold",
-          label: "\u6781\u7C97\uFF08Extra Bold\uFF09",
-          rawValue: "800"
-        },
+        { value: "font-extrabold", label: "\u6781\u7C97\uFF08Extra Bold\uFF09", rawValue: "800" },
         { value: "font-black", label: "\u9ED1\u4F53\uFF08Black\uFF09", rawValue: "900" }
       ]
     },
@@ -118,72 +110,22 @@ const defaultUIConfig = {
               type: "tailwind",
               rawValue: "#ffffff"
             },
-            {
-              value: "text-neutral-50",
-              label: "neutral-50",
-              type: "tailwind",
-              rawValue: "#f5f6f7"
-            },
-            {
-              value: "text-neutral-100",
-              label: "neutral-100",
-              type: "tailwind",
-              rawValue: "#f2f3f5"
-            },
-            {
-              value: "text-neutral-200",
-              label: "neutral-200",
-              type: "tailwind",
-              rawValue: "#eff0f1"
-            },
-            {
-              value: "text-neutral-300",
-              label: "neutral-300",
-              type: "tailwind",
-              rawValue: "#dee0e3"
-            },
-            {
-              value: "text-neutral-400",
-              label: "neutral-400",
-              type: "tailwind",
-              rawValue: "#d0d3d6"
-            },
-            {
-              value: "text-neutral-500",
-              label: "neutral-500",
-              type: "tailwind",
-              rawValue: "#bbbfc4"
-            },
-            {
-              value: "text-neutral-600",
-              label: "neutral-600",
-              type: "tailwind",
-              rawValue: "#8f959e"
-            },
+            { value: "text-neutral-50", label: "neutral-50", type: "tailwind", rawValue: "#f5f6f7" },
+            { value: "text-neutral-100", label: "neutral-100", type: "tailwind", rawValue: "#f2f3f5" },
+            { value: "text-neutral-200", label: "neutral-200", type: "tailwind", rawValue: "#eff0f1" },
+            { value: "text-neutral-300", label: "neutral-300", type: "tailwind", rawValue: "#dee0e3" },
+            { value: "text-neutral-400", label: "neutral-400", type: "tailwind", rawValue: "#d0d3d6" },
+            { value: "text-neutral-500", label: "neutral-500", type: "tailwind", rawValue: "#bbbfc4" },
+            { value: "text-neutral-600", label: "neutral-600", type: "tailwind", rawValue: "#8f959e" },
             {
               value: "text-neutral-650",
               label: "neutral-650",
               type: "tailwind",
               rawValue: "#51565d"
             },
-            {
-              value: "text-neutral-700",
-              label: "neutral-700",
-              type: "tailwind",
-              rawValue: "#646a73"
-            },
-            {
-              value: "text-neutral-800",
-              label: "neutral-800",
-              type: "tailwind",
-              rawValue: "#373c43"
-            },
-            {
-              value: "text-neutral-900",
-              label: "neutral-900",
-              type: "tailwind",
-              rawValue: "#2b2f36"
-            },
+            { value: "text-neutral-700", label: "neutral-700", type: "tailwind", rawValue: "#646a73" },
+            { value: "text-neutral-800", label: "neutral-800", type: "tailwind", rawValue: "#373c43" },
+            { value: "text-neutral-900", label: "neutral-900", type: "tailwind", rawValue: "#2b2f36" },
             {
               value: "text-neutral-950",
               label: "neutral-950",
@@ -212,72 +154,22 @@ const defaultUIConfig = {
               type: "tailwind",
               rawValue: "#ffffff"
             },
-            {
-              value: "bg-neutral-50",
-              label: "neutral-50",
-              type: "tailwind",
-              rawValue: "#f5f6f7"
-            },
-            {
-              value: "bg-neutral-100",
-              label: "neutral-100",
-              type: "tailwind",
-              rawValue: "#f2f3f5"
-            },
-            {
-              value: "bg-neutral-200",
-              label: "neutral-200",
-              type: "tailwind",
-              rawValue: "#eff0f1"
-            },
-            {
-              value: "bg-neutral-300",
-              label: "neutral-300",
-              type: "tailwind",
-              rawValue: "#dee0e3"
-            },
-            {
-              value: "bg-neutral-400",
-              label: "neutral-400",
-              type: "tailwind",
-              rawValue: "#d0d3d6"
-            },
-            {
-              value: "bg-neutral-500",
-              label: "neutral-500",
-              type: "tailwind",
-              rawValue: "#bbbfc4"
-            },
-            {
-              value: "bg-neutral-600",
-              label: "neutral-600",
-              type: "tailwind",
-              rawValue: "#8f959e"
-            },
+            { value: "bg-neutral-50", label: "neutral-50", type: "tailwind", rawValue: "#f5f6f7" },
+            { value: "bg-neutral-100", label: "neutral-100", type: "tailwind", rawValue: "#f2f3f5" },
+            { value: "bg-neutral-200", label: "neutral-200", type: "tailwind", rawValue: "#eff0f1" },
+            { value: "bg-neutral-300", label: "neutral-300", type: "tailwind", rawValue: "#dee0e3" },
+            { value: "bg-neutral-400", label: "neutral-400", type: "tailwind", rawValue: "#d0d3d6" },
+            { value: "bg-neutral-500", label: "neutral-500", type: "tailwind", rawValue: "#bbbfc4" },
+            { value: "bg-neutral-600", label: "neutral-600", type: "tailwind", rawValue: "#8f959e" },
             {
               value: "bg-neutral-650",
               label: "neutral-650",
               type: "tailwind",
               rawValue: "#51565d"
             },
-            {
-              value: "bg-neutral-700",
-              label: "neutral-700",
-              type: "tailwind",
-              rawValue: "#646a73"
-            },
-            {
-              value: "bg-neutral-800",
-              label: "neutral-800",
-              type: "tailwind",
-              rawValue: "#373c43"
-            },
-            {
-              value: "bg-neutral-900",
-              label: "neutral-900",
-              type: "tailwind",
-              rawValue: "#2b2f36"
-            },
+            { value: "bg-neutral-700", label: "neutral-700", type: "tailwind", rawValue: "#646a73" },
+            { value: "bg-neutral-800", label: "neutral-800", type: "tailwind", rawValue: "#373c43" },
+            { value: "bg-neutral-900", label: "neutral-900", type: "tailwind", rawValue: "#2b2f36" },
             {
               value: "bg-neutral-950",
               label: "neutral-950",
@@ -306,12 +198,7 @@ const defaultUIConfig = {
               type: "tailwind",
               rawValue: "#ffffff"
             },
-            {
-              value: "border-neutral-50",
-              label: "neutral-50",
-              type: "tailwind",
-              rawValue: "#f5f6f7"
-            },
+            { value: "border-neutral-50", label: "neutral-50", type: "tailwind", rawValue: "#f5f6f7" },
             {
               value: "border-neutral-100",
               label: "neutral-100",
@@ -560,6 +447,121 @@ const defaultUIConfig = {
     "cyan-800": "#0f587a",
     "cyan-900": "#06415c",
     "cyan-950": "#072b3d"
+  },
+  components: {
+    nativeTag: {
+      img: {
+        src: {
+          type: "image",
+          label: "\u56FE\u7247"
+        }
+      }
+    },
+    antd: {
+      Button: {
+        children: {
+          label: "\u6587\u6848",
+          type: "input"
+        },
+        icon: {
+          label: "\u56FE\u6807",
+          type: "icon-picker"
+        },
+        type: {
+          label: "\u7C7B\u578B",
+          type: "select",
+          options: [
+            {
+              value: "primary",
+              label: "\u4E3B\u8981\u6309\u94AE",
+              rawValue: "primary",
+              prefix: {
+                type: "tag",
+                value: "Button",
+                style: {
+                  display: "inline-block",
+                  backgroundColor: "#1456F0",
+                  color: "#fff",
+                  borderRadius: "5px",
+                  padding: "2px 8px",
+                  lineHeight: "20px"
+                }
+              }
+            },
+            {
+              value: "default",
+              label: "\u6B21\u8981\u6309\u94AE",
+              rawValue: "default",
+              prefix: {
+                type: "tag",
+                value: "Button",
+                style: {
+                  display: "inline-block",
+                  borderStyle: "solid",
+                  borderColor: "#1456F0",
+                  borderWidth: "1px",
+                  color: "#1456F0",
+                  borderRadius: "5px",
+                  padding: "1px 7px",
+                  lineHeight: "20px"
+                }
+              }
+            },
+            {
+              value: "text",
+              label: "\u6587\u5B57\u6309\u94AE",
+              rawValue: "text",
+              prefix: {
+                type: "tag",
+                value: "Button",
+                style: {
+                  display: "inline-block",
+                  color: "#1F2329",
+                  padding: "2px 8px",
+                  lineHeight: "20px"
+                }
+              }
+            },
+            {
+              value: "link",
+              label: "\u94FE\u63A5\u6309\u94AE",
+              rawValue: "link",
+              prefix: {
+                type: "tag",
+                value: "Button",
+                style: {
+                  display: "inline-block",
+                  color: "#1456F0",
+                  padding: "2px 8px",
+                  lineHeight: "20px"
+                }
+              }
+            }
+          ],
+          defaultValue: "default"
+        },
+        shape: {
+          label: "\u5F62\u72B6",
+          type: "radioGroup",
+          options: [
+            { value: "default", label: "\u77E9\u5F62", rawValue: "default" },
+            { value: "circle", label: "\u5706\u5F62", rawValue: "circle" },
+            { value: "round", label: "\u5706\u89D2", rawValue: "round" }
+          ],
+          defaultValue: "default"
+        },
+        size: {
+          label: "\u5C3A\u5BF8",
+          type: "radioGroup",
+          options: [
+            { value: "large", label: "\u5927", rawValue: "large" },
+            { value: "middle", label: "\u4E2D", rawValue: "middle" },
+            { value: "small", label: "\u5C0F", rawValue: "small" }
+          ],
+          defaultValue: "middle"
+        }
+      }
+    }
   }
 };
 export {

package/dist/es/index.mjs

@@ -1,7 +1,9 @@
 import "./chunk-I4E63NIC.mjs";
 import { MiaodaInspector } from "./MiaodaInspector";
+import { defaultUIConfig } from "./config/ui-config";
 import { isOutgoingMessage } from "./utils";
 export {
   MiaodaInspector,
+  defaultUIConfig,
   isOutgoingMessage
 };

package/dist/es/types/index.mjs

@@ -5,6 +5,7 @@ import {
   EditTextMessage,
   EditStyleMessage,
   EditClassNameMessage,
+  EditAttributesMessage,
   OutgoingMessage,
   PageMountedMessage,
   TextUpdateMessage,
@@ -12,11 +13,14 @@ import {
   IncomingMessage,
   InspectorInfo
 } from "./iframe-events";
+import { Feature } from "./feature";
 export {
   ClearSelectedMessage,
+  EditAttributesMessage,
   EditClassNameMessage,
   EditStyleMessage,
   EditTextMessage,
+  Feature,
   IncomingMessage,
   InitConfigMessage,
   InspectorInfo,

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

@@ -51,9 +51,7 @@ function getStyleCalculationConfig(config, propertyName) {
     return getColorStyleCalculationConfig(config, propertyName);
   }
   if (uiComponent.type !== "select" && uiComponent.type !== "spacing") {
-    throw new Error(
-      `Unsupported UI component type: ${uiComponent.type} for property: ${propertyName}`
-    );
+    throw new Error(`Unsupported UI component type: ${uiComponent.type} for property: ${propertyName}`);
   }
   const map = {};
   for (const option of uiComponent.options) {

package/dist/es/utils/element-guards.mjs

@@ -0,0 +1,36 @@
+import "../chunk-I4E63NIC.mjs";
+function getCompiledComponentName(element, fallback) {
+  return element.getAttribute("data-miaoda-component-name") || fallback;
+}
+function getImportSource(element) {
+  return element.getAttribute("data-miaoda-import-source");
+}
+function hasNonEmptyText(element) {
+  return typeof element.textContent === "string" && element.textContent.trim().length > 0;
+}
+function isNativeElementName(componentName) {
+  return Boolean(componentName && componentName[0] !== componentName[0].toUpperCase());
+}
+function isAntdText(element, componentName) {
+  const importSource = getImportSource(element);
+  const compiledName = getCompiledComponentName(element, componentName);
+  if (importSource !== "antd" || !compiledName) {
+    return false;
+  }
+  const textualNames = /* @__PURE__ */ new Set([
+    "Typography.Text",
+    "Text",
+    "Typography.Title",
+    "Title",
+    "Typography.Paragraph",
+    "Paragraph"
+  ]);
+  return textualNames.has(compiledName);
+}
+export {
+  getCompiledComponentName,
+  getImportSource,
+  hasNonEmptyText,
+  isAntdText,
+  isNativeElementName
+};

package/dist/es/utils/index.mjs

@@ -1,10 +1,5 @@
 import "../chunk-I4E63NIC.mjs";
-import {
-  getPreviewParentOrigin,
-  postMessage,
-  isIncomingMessage,
-  isOutgoingMessage
-} from "./origin";
+import { getPreviewParentOrigin, postMessage, isIncomingMessage, isOutgoingMessage } from "./origin";
 import { cx } from "./css";
 import {
   calculateFontSizeInfo,

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

@@ -2,6 +2,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-I4E63NIC.mjs";
+import { isAntdText, isNativeElementName } from "./element-guards";
 function rgbaToHex(rgba) {
   const match = rgba.match(/rgba?\(([^)]+)\)/);
   if (!match) return rgba;
@@ -24,7 +25,13 @@ function rgbaToHex(rgba) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 function isValidElement(element, componentName, canUseNewInspector) {
-  return !!(element && componentName && componentName[0] !== componentName[0].toUpperCase() && canUseNewInspector && !(element instanceof SVGElement));
+  if (!element || !componentName || !canUseNewInspector || element instanceof SVGElement) {
+    return false;
+  }
+  if (isNativeElementName(componentName)) {
+    return true;
+  }
+  return isAntdText(element, componentName);
 }
 function isValidElementWithComponent(element, componentName, canUseNewInspector) {
   return !!(element && componentName && canUseNewInspector && !(element instanceof SVGElement));
@@ -86,48 +93,16 @@ function calculateStyle(styleName, element, componentName, canUseNewInspector, s
     return null;
   }
   const config = styleConfigs[styleName];
-  const tailwindPattern = new RegExp(
-    `\\b${config.tailwindPrefix}-(${Object.keys(config.map).join("|")})\\b`
-  );
+  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 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;
@@ -140,27 +115,9 @@ const calculateMarginInfo = (element, componentName, canUseNewInspector, styleCo
   }
   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
-);
+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,

package/dist/lib/Inspector/Inspector.js

@@ -39,26 +39,6 @@ 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, 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;
-    }
-    parent = parent.parentElement;
-  }
-  return;
-};
 const defaultHotkeys = () => {
   var _a;
   return ((_a = navigator.platform) == null ? void 0 : _a.startsWith("Mac")) ? ["Ctrl", "Shift", "Command", "C"] : ["Ctrl", "Shift", "Alt", "C"];
@@ -99,7 +79,7 @@ const Inspector = (props) => {
   const handleHoverElement = (0, import_hooks.useEffectEvent)((element) => {
     var _a;
     const overlay = overlayRef.current;
-    const targetElement = getParentElement(element);
+    const targetElement = (0, import_utils.getParentElement)(element);
     if (!targetElement) {
       return;
     }
@@ -116,7 +96,7 @@ const Inspector = (props) => {
     });
   });
   const handleClickElement = (0, import_hooks.useEffectEvent)((element) => {
-    const targetElement = getParentElement(element);
+    const targetElement = (0, import_utils.getParentElement)(element);
     if (!targetElement) {
       return;
     }
@@ -127,7 +107,8 @@ const Inspector = (props) => {
       fiber,
       codeInfo,
       name,
-      title
+      title,
+      componentProps: (0, import_utils.extractPropsFromFiber)(fiber)
     });
     if (fiber && codeInfo) {
       onInspectElement == null ? void 0 : onInspectElement({