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

package/dist/lib/Inspector/utils/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+_export_star(require("./highlight"), exports);
+_export_star(require("./inspect"), exports);
+_export_star(require("./overlay"), exports);
+function _export_star(from, to) {
+  Object.keys(from).forEach(function(k) {
+    if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+      Object.defineProperty(to, k, {
+        enumerable: true,
+        get: function() {
+          return from[k];
+        }
+      });
+    }
+  });
+  return from;
+}

package/dist/lib/Inspector/utils/inspect.js

@@ -0,0 +1,153 @@
+"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, {
+  getCodeInfoFromDebugSource: function() {
+    return getCodeInfoFromDebugSource;
+  },
+  getCodeInfoFromProps: function() {
+    return getCodeInfoFromProps;
+  },
+  getCodeInfoFromFiber: function() {
+    return getCodeInfoFromFiber;
+  },
+  getReferenceFiber: function() {
+    return getReferenceFiber;
+  },
+  getElementCodeInfo: function() {
+    return getElementCodeInfo;
+  },
+  getNamedFiber: function() {
+    return getNamedFiber;
+  },
+  getElementInspect: function() {
+    return getElementInspect;
+  }
+});
+const _fiber = require("./fiber");
+const getCodeInfoFromDebugSource = (fiber) => {
+  var _fiber__debugOwner;
+  if (!fiber)
+    return void 0;
+  var _fiber__debugSource;
+  const debugSource = (_fiber__debugSource = fiber._debugSource) !== null && _fiber__debugSource !== void 0 ? _fiber__debugSource : (_fiber__debugOwner = fiber._debugOwner) === null || _fiber__debugOwner === void 0 ? void 0 : _fiber__debugOwner._debugSource;
+  if (!debugSource)
+    return void 0;
+  const { fileName, lineNumber, columnNumber } = debugSource;
+  if (fileName && lineNumber) {
+    return {
+      lineNumber: String(lineNumber),
+      columnNumber: String(columnNumber !== null && columnNumber !== void 0 ? columnNumber : 1),
+      /**
+      * `fileName` in `_debugSource` is absolutely
+      * ---
+      *
+      * compatible with the incorrect `fileName: "</xxx/file>"` by [rspack](https://github.com/web-infra-dev/rspack)
+      */
+      absolutePath: fileName.match(/^<.*>$/) ? fileName.replace(/^<|>$/g, "") : fileName
+    };
+  }
+  return void 0;
+};
+const getCodeInfoFromProps = (fiber) => {
+  if (!(fiber === null || fiber === void 0 ? void 0 : fiber.pendingProps))
+    return void 0;
+  const { "data-miaoda-line": lineNumber, "data-miaoda-column": columnNumber, "data-miaoda-relative-path": relativePath, "data-miaoda-component-name": name, "data-miaoda-metadata": metadataStr } = fiber.pendingProps;
+  let metadata;
+  if (metadataStr) {
+    try {
+      metadata = JSON.parse(metadataStr);
+    } catch (e) {
+      metadata = void 0;
+    }
+  }
+  if (name && lineNumber && columnNumber && relativePath) {
+    return {
+      name,
+      lineNumber,
+      columnNumber,
+      relativePath,
+      metadata
+    };
+  }
+  return void 0;
+};
+const getCodeInfoFromFiber = (fiber) => {
+  const codeInfos = [
+    // getCodeInfoFromDebugSource(fiber),
+    getCodeInfoFromProps(fiber)
+  ].filter(Boolean);
+  if (!codeInfos.length)
+    return void 0;
+  return Object.assign({}, ...codeInfos);
+};
+const getReferenceFiber = (baseFiber) => {
+  if (!baseFiber)
+    return void 0;
+  const directParent = (0, _fiber.getDirectParentFiber)(baseFiber);
+  if (!directParent)
+    return void 0;
+  const isParentNative = (0, _fiber.isNativeTagFiber)(directParent);
+  const isOnlyOneChild = !directParent.child.sibling;
+  let referenceFiber = !isParentNative && isOnlyOneChild ? directParent : baseFiber;
+  const originReferenceFiber = referenceFiber;
+  while (referenceFiber) {
+    if (getCodeInfoFromFiber(referenceFiber))
+      return referenceFiber;
+    referenceFiber = referenceFiber.return;
+  }
+  return originReferenceFiber;
+};
+const getElementCodeInfo = (element) => {
+  const fiber = (0, _fiber.getElementFiberUpward)(element);
+  const referenceFiber = getReferenceFiber(fiber);
+  return getCodeInfoFromFiber(referenceFiber);
+};
+const getNamedFiber = (baseFiber) => {
+  let fiber = baseFiber;
+  let originNamedFiber;
+  while (fiber) {
+    var _fiber_return;
+    let parent = (_fiber_return = fiber.return) !== null && _fiber_return !== void 0 ? _fiber_return : void 0;
+    let forwardParent;
+    while ((0, _fiber.isReactSymbolFiber)(parent)) {
+      if ((0, _fiber.isForwardRef)(parent)) {
+        forwardParent = parent;
+      }
+      var _parent_return;
+      parent = (_parent_return = parent === null || parent === void 0 ? void 0 : parent.return) !== null && _parent_return !== void 0 ? _parent_return : void 0;
+    }
+    if (forwardParent) {
+      fiber = forwardParent;
+    }
+    if ((0, _fiber.getFiberName)(fiber)) {
+      if (!originNamedFiber)
+        originNamedFiber = fiber;
+      if (getCodeInfoFromFiber(fiber))
+        return fiber;
+    }
+    fiber = parent;
+  }
+  return originNamedFiber;
+};
+const getElementInspect = (element) => {
+  const fiber = (0, _fiber.getElementFiberUpward)(element);
+  const referenceFiber = getReferenceFiber(fiber);
+  const namedFiber = getNamedFiber(referenceFiber);
+  const fiberName = (0, _fiber.getFiberName)(namedFiber);
+  const nodeName = element.nodeName.toLowerCase();
+  const title = fiberName !== null && fiberName !== void 0 ? fiberName : nodeName;
+  return {
+    fiber: referenceFiber,
+    name: fiberName,
+    title
+  };
+};

package/dist/lib/Inspector/utils/overlay.js

@@ -0,0 +1,39 @@
+"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, {
+  getNestedBoundingClientRect: function() {
+    return getNestedBoundingClientRect;
+  },
+  getElementDimensions: function() {
+    return getElementDimensions;
+  }
+});
+function getNestedBoundingClientRect(node) {
+  return node.getBoundingClientRect();
+}
+function getElementDimensions(domElement) {
+  const calculatedStyle = window.getComputedStyle(domElement);
+  return {
+    borderLeft: Number.parseInt(calculatedStyle.borderLeftWidth, 10),
+    borderRight: Number.parseInt(calculatedStyle.borderRightWidth, 10),
+    borderTop: Number.parseInt(calculatedStyle.borderTopWidth, 10),
+    borderBottom: Number.parseInt(calculatedStyle.borderBottomWidth, 10),
+    marginLeft: Number.parseInt(calculatedStyle.marginLeft, 10),
+    marginRight: Number.parseInt(calculatedStyle.marginRight, 10),
+    marginTop: Number.parseInt(calculatedStyle.marginTop, 10),
+    marginBottom: Number.parseInt(calculatedStyle.marginBottom, 10),
+    paddingLeft: Number.parseInt(calculatedStyle.paddingLeft, 10),
+    paddingRight: Number.parseInt(calculatedStyle.paddingRight, 10),
+    paddingTop: Number.parseInt(calculatedStyle.paddingTop, 10),
+    paddingBottom: Number.parseInt(calculatedStyle.paddingBottom, 10)
+  };
+}

package/dist/lib/MiaodaInspector/MiaodaInspector.css

@@ -0,0 +1,46 @@
+.dev-inspector > div:first-child {
+  outline: 1px dashed #1456f0 !important;
+  border-color: #1456f01a !important;
+}
+.dev-inspector > div > div {
+  border-color: #1456f01a !important;
+}
+.dev-inspector > div > div > div {
+  border-color: #1456f01a !important;
+}
+.dev-inspector > div > div > div > div {
+  background-color: #1456f01a !important;
+}
+.dev-inspector > div:nth-child(2) {
+  background-color: #1456f0 !important;
+  border-radius: 6px !important;
+  font-size: 14px !important;
+}
+.dev-inspector > div:nth-child(2) > span:first-child > div {
+  color: #fff !important;
+  font-size: 14px !important;
+}
+.dev-inspector > div:nth-child(2) > span:first-child {
+  border: none !important;
+  margin: 0 !important;
+}
+#selected-inspector > div {
+  background-color: transparent !important;
+  outline: 1px solid #1456f0 !important;
+  border-color: transparent !important;
+}
+#selected-inspector > div > div {
+  border-color: transparent !important;
+}
+#selected-inspector > div > div > div {
+  border-color: transparent !important;
+}
+#selected-inspector > div > div > div > div {
+  background-color: transparent !important;
+}
+#selected-inspector > div:nth-child(2) {
+  display: none !important;
+}
+[contenteditable=true] {
+  outline: none !important;
+}