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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/dist/es/Inspector/{Inspector.js → Inspector.mjs} +50 -55
  2. package/dist/es/Inspector/{Overlay.js → Overlay.mjs} +157 -125
  3. package/dist/es/Inspector/hooks/use-effect-event.mjs +17 -0
  4. package/dist/es/Inspector/hooks/use-layout-effect.mjs +9 -0
  5. package/dist/es/Inspector/hooks/{use-mouse.js → use-mouse.mjs} +8 -4
  6. package/dist/es/Inspector/index.mjs +5 -0
  7. package/dist/es/Inspector/utils/fiber.mjs +70 -0
  8. package/dist/es/Inspector/utils/highlight.mjs +78 -0
  9. package/dist/es/Inspector/utils/inspect.mjs +131 -0
  10. package/dist/es/Inspector/utils/{overlay.js → overlay.mjs} +7 -2
  11. package/dist/es/MiaodaInspector/MiaodaInspector.mjs +427 -0
  12. package/dist/es/MiaodaInspector/index.mjs +5 -0
  13. package/dist/es/chunk-I4E63NIC.mjs +24 -0
  14. package/dist/es/config/{ui-config.js → ui-config.mjs} +66 -286
  15. package/dist/es/global.d.mjs +0 -0
  16. package/dist/es/index.mjs +7 -0
  17. package/dist/es/types/iframe-events.mjs +0 -0
  18. package/dist/es/types/index.mjs +27 -0
  19. package/dist/es/utils/{config-mapper.js → config-mapper.mjs} +14 -56
  20. package/dist/es/utils/{css.js → css.mjs} +5 -1
  21. package/dist/es/utils/index.mjs +37 -0
  22. package/dist/es/utils/origin.mjs +26 -0
  23. package/dist/es/utils/style-calculator.mjs +177 -0
  24. package/dist/lib/Inspector/Inspector.js +99 -104
  25. package/dist/lib/Inspector/Overlay.js +172 -143
  26. package/dist/lib/Inspector/hooks/index.js +19 -19
  27. package/dist/lib/Inspector/hooks/use-effect-event.js +26 -15
  28. package/dist/lib/Inspector/hooks/use-layout-effect.js +25 -10
  29. package/dist/lib/Inspector/hooks/use-mouse.js +27 -14
  30. package/dist/lib/Inspector/index.js +21 -8
  31. package/dist/lib/Inspector/utils/fiber.js +49 -55
  32. package/dist/lib/Inspector/utils/highlight.js +44 -31
  33. package/dist/lib/Inspector/utils/index.js +19 -19
  34. package/dist/lib/Inspector/utils/inspect.js +62 -72
  35. package/dist/lib/Inspector/utils/overlay.js +20 -15
  36. package/dist/lib/MiaodaInspector/MiaodaInspector.js +265 -266
  37. package/dist/lib/MiaodaInspector/index.js +21 -8
  38. package/dist/lib/config/ui-config.js +81 -292
  39. package/dist/lib/global.d.js +1 -0
  40. package/dist/lib/index.js +22 -17
  41. package/dist/lib/types/iframe-events.js +15 -3
  42. package/dist/lib/types/index.js +30 -43
  43. package/dist/lib/utils/config-mapper.js +41 -69
  44. package/dist/lib/utils/css.js +33 -15
  45. package/dist/lib/utils/index.js +36 -57
  46. package/dist/lib/utils/origin.js +23 -22
  47. package/dist/lib/utils/style-calculator.js +113 -110
  48. package/dist/types/Inspector/Inspector.d.ts +95 -92
  49. package/dist/types/Inspector/Overlay.d.ts +61 -58
  50. package/dist/types/Inspector/hooks/index.d.ts +4 -3
  51. package/dist/types/Inspector/hooks/use-effect-event.d.ts +3 -1
  52. package/dist/types/Inspector/hooks/use-layout-effect.d.ts +5 -2
  53. package/dist/types/Inspector/hooks/use-mouse.d.ts +9 -8
  54. package/dist/types/Inspector/index.d.ts +4 -1
  55. package/dist/types/Inspector/utils/fiber.d.ts +12 -10
  56. package/dist/types/Inspector/utils/highlight.d.ts +7 -5
  57. package/dist/types/Inspector/utils/index.d.ts +4 -3
  58. package/dist/types/Inspector/utils/inspect.d.ts +45 -42
  59. package/dist/types/Inspector/utils/overlay.d.ts +24 -22
  60. package/dist/types/MiaodaInspector/MiaodaInspector.d.ts +42 -41
  61. package/dist/types/MiaodaInspector/index.d.ts +3 -1
  62. package/dist/types/config/ui-config.d.ts +42 -41
  63. package/dist/types/global.d.d.ts +17 -0
  64. package/dist/types/index.d.ts +5 -4
  65. package/dist/types/types/iframe-events.d.ts +133 -130
  66. package/dist/types/types/index.d.ts +2 -1
  67. package/dist/types/utils/config-mapper.d.ts +14 -11
  68. package/dist/types/utils/css.d.ts +5 -2
  69. package/dist/types/utils/index.d.ts +7 -3
  70. package/dist/types/utils/origin.d.ts +12 -8
  71. package/dist/types/utils/style-calculator.d.ts +20 -17
  72. package/package.json +13 -13
  73. package/dist/es/Inspector/hooks/use-effect-event.js +0 -15
  74. package/dist/es/Inspector/hooks/use-layout-effect.js +0 -3
  75. package/dist/es/Inspector/index.js +0 -1
  76. package/dist/es/Inspector/utils/fiber.js +0 -61
  77. package/dist/es/Inspector/utils/highlight.js +0 -74
  78. package/dist/es/Inspector/utils/inspect.js +0 -119
  79. package/dist/es/MiaodaInspector/MiaodaInspector.js +0 -397
  80. package/dist/es/MiaodaInspector/index.js +0 -1
  81. package/dist/es/index.js +0 -2
  82. package/dist/es/types/iframe-events.js +0 -1
  83. package/dist/es/types/index.js +0 -1
  84. package/dist/es/utils/index.js +0 -3
  85. package/dist/es/utils/origin.js +0 -19
  86. package/dist/es/utils/style-calculator.js +0 -158
  87. /package/dist/es/Inspector/hooks/{index.js → index.mjs} +0 -0
  88. /package/dist/es/Inspector/utils/{index.js → index.mjs} +0 -0
@@ -0,0 +1,70 @@
1
+ import "../../chunk-I4E63NIC.mjs";
2
+ const isNativeTagFiber = (fiber) => typeof (fiber == null ? void 0 : fiber.type) === "string";
3
+ const isReactSymbolFiber = (fiber) => {
4
+ var _a;
5
+ return typeof ((_a = fiber == null ? void 0 : fiber.type) == null ? void 0 : _a.$$typeof) === "symbol";
6
+ };
7
+ const isForwardRef = (fiber) => {
8
+ var _a;
9
+ return ((_a = fiber == null ? void 0 : fiber.type) == null ? void 0 : _a.$$typeof) === Symbol.for("react.forward_ref");
10
+ };
11
+ const getElementFiber = (element) => {
12
+ const fiberKey = Object.keys(element).find(
13
+ (key) => (
14
+ /**
15
+ * for react <= v16.13.1
16
+ * https://github.com/facebook/react/blob/v16.13.1/packages/react-dom/src/client/ReactDOMComponentTree.js#L21
17
+ */
18
+ key.startsWith("__reactInternalInstance$") || /**
19
+ * for react >= v16.14.0
20
+ * https://github.com/facebook/react/blob/v16.14.0/packages/react-dom/src/client/ReactDOMComponentTree.js#L39
21
+ */
22
+ key.startsWith("__reactFiber$")
23
+ )
24
+ );
25
+ if (fiberKey) {
26
+ return element[fiberKey];
27
+ }
28
+ return void 0;
29
+ };
30
+ const getElementFiberUpward = (element) => {
31
+ if (!element) return void 0;
32
+ const fiber = getElementFiber(element);
33
+ if (fiber) return fiber;
34
+ return getElementFiberUpward(element.parentElement);
35
+ };
36
+ const getDirectParentFiber = (child) => {
37
+ let current = child.return;
38
+ while (current) {
39
+ if (!isReactSymbolFiber(current)) {
40
+ return current;
41
+ }
42
+ current = current.return;
43
+ }
44
+ return null;
45
+ };
46
+ const getFiberName = (fiber) => {
47
+ var _a;
48
+ const fiberType = fiber == null ? void 0 : fiber.type;
49
+ if (!fiberType) return void 0;
50
+ const { displayName, name } = fiberType;
51
+ if ((_a = fiber == null ? void 0 : fiber.pendingProps) == null ? void 0 : _a["data-miaoda-component-name"]) {
52
+ return fiber.pendingProps["data-miaoda-component-name"];
53
+ }
54
+ if (typeof displayName === "string") {
55
+ return displayName;
56
+ }
57
+ if (typeof name === "string") {
58
+ return name;
59
+ }
60
+ return void 0;
61
+ };
62
+ export {
63
+ getDirectParentFiber,
64
+ getElementFiber,
65
+ getElementFiberUpward,
66
+ getFiberName,
67
+ isForwardRef,
68
+ isNativeTagFiber,
69
+ isReactSymbolFiber
70
+ };
@@ -0,0 +1,78 @@
1
+ import "../../chunk-I4E63NIC.mjs";
2
+ let iframesListeningTo = /* @__PURE__ */ new Set();
3
+ function setupHighlighter(handlers) {
4
+ function onClick(event) {
5
+ var _a;
6
+ event.preventDefault();
7
+ event.stopPropagation();
8
+ (_a = handlers.onClick) == null ? void 0 : _a.call(handlers, event.target);
9
+ }
10
+ function onMouseEvent(event) {
11
+ event.stopPropagation();
12
+ }
13
+ function onPointerDown(event) {
14
+ event.stopPropagation();
15
+ }
16
+ function onPointerOver(event) {
17
+ var _a;
18
+ event.preventDefault();
19
+ event.stopPropagation();
20
+ const target = event.target;
21
+ if (target.tagName === "IFRAME") {
22
+ const iframe = target;
23
+ try {
24
+ if (!iframesListeningTo.has(iframe)) {
25
+ const window2 = iframe.contentWindow;
26
+ registerListenersOnWindow(window2);
27
+ iframesListeningTo.add(iframe);
28
+ }
29
+ } catch (error) {
30
+ }
31
+ }
32
+ (_a = handlers.onPointerOver) == null ? void 0 : _a.call(handlers, event.target);
33
+ }
34
+ function onPointerUp(event) {
35
+ event.preventDefault();
36
+ event.stopPropagation();
37
+ }
38
+ function removeListenersOnWindow(window2) {
39
+ if (window2 && typeof window2.removeEventListener === "function") {
40
+ window2.removeEventListener("click", onClick, true);
41
+ window2.removeEventListener("mousedown", onMouseEvent, true);
42
+ window2.removeEventListener("mouseover", onMouseEvent, true);
43
+ window2.removeEventListener("mouseup", onMouseEvent, true);
44
+ window2.removeEventListener("pointerdown", onPointerDown, true);
45
+ window2.removeEventListener("pointerover", onPointerOver, true);
46
+ window2.removeEventListener("pointerup", onPointerUp, true);
47
+ }
48
+ }
49
+ function stopInspectingNative() {
50
+ removeListenersOnWindow(window);
51
+ iframesListeningTo.forEach((frame) => {
52
+ try {
53
+ removeListenersOnWindow(frame.contentWindow);
54
+ } catch (error) {
55
+ }
56
+ });
57
+ iframesListeningTo = /* @__PURE__ */ new Set();
58
+ }
59
+ function registerListenersOnWindow(window2) {
60
+ if (window2 && typeof window2.addEventListener === "function") {
61
+ window2.addEventListener("click", onClick, true);
62
+ window2.addEventListener("mousedown", onMouseEvent, true);
63
+ window2.addEventListener("mouseover", onMouseEvent, true);
64
+ window2.addEventListener("mouseup", onMouseEvent, true);
65
+ window2.addEventListener("pointerdown", onPointerDown, true);
66
+ window2.addEventListener("pointerover", onPointerOver, true);
67
+ window2.addEventListener("pointerup", onPointerUp, true);
68
+ }
69
+ }
70
+ function startInspectingNative() {
71
+ registerListenersOnWindow(window);
72
+ }
73
+ startInspectingNative();
74
+ return stopInspectingNative;
75
+ }
76
+ export {
77
+ setupHighlighter
78
+ };
@@ -0,0 +1,131 @@
1
+ import "../../chunk-I4E63NIC.mjs";
2
+ import {
3
+ isNativeTagFiber,
4
+ isReactSymbolFiber,
5
+ isForwardRef,
6
+ getDirectParentFiber,
7
+ getFiberName,
8
+ getElementFiberUpward
9
+ } from "./fiber";
10
+ const getCodeInfoFromDebugSource = (fiber) => {
11
+ var _a, _b;
12
+ if (!fiber) return void 0;
13
+ const debugSource = (_b = fiber._debugSource) != null ? _b : (_a = fiber._debugOwner) == null ? void 0 : _a._debugSource;
14
+ if (!debugSource) return void 0;
15
+ const { fileName, lineNumber, columnNumber } = debugSource;
16
+ if (fileName && lineNumber) {
17
+ return {
18
+ lineNumber: String(lineNumber),
19
+ columnNumber: String(columnNumber != null ? columnNumber : 1),
20
+ /**
21
+ * `fileName` in `_debugSource` is absolutely
22
+ * ---
23
+ *
24
+ * compatible with the incorrect `fileName: "</xxx/file>"` by [rspack](https://github.com/web-infra-dev/rspack)
25
+ */
26
+ absolutePath: fileName.match(/^<.*>$/) ? fileName.replace(/^<|>$/g, "") : fileName
27
+ };
28
+ }
29
+ return void 0;
30
+ };
31
+ const getCodeInfoFromProps = (fiber) => {
32
+ if (!(fiber == null ? void 0 : fiber.pendingProps)) return void 0;
33
+ const {
34
+ "data-miaoda-line": lineNumber,
35
+ "data-miaoda-column": columnNumber,
36
+ "data-miaoda-relative-path": relativePath,
37
+ "data-miaoda-component-name": name,
38
+ "data-miaoda-metadata": metadataStr
39
+ } = fiber.pendingProps;
40
+ let metadata;
41
+ if (metadataStr) {
42
+ try {
43
+ metadata = JSON.parse(metadataStr);
44
+ } catch (e) {
45
+ metadata = void 0;
46
+ }
47
+ }
48
+ if (name && lineNumber && columnNumber && relativePath) {
49
+ return {
50
+ name,
51
+ lineNumber,
52
+ columnNumber,
53
+ relativePath,
54
+ metadata
55
+ };
56
+ }
57
+ return void 0;
58
+ };
59
+ const getCodeInfoFromFiber = (fiber) => {
60
+ const codeInfos = [
61
+ // getCodeInfoFromDebugSource(fiber),
62
+ getCodeInfoFromProps(fiber)
63
+ ].filter(Boolean);
64
+ if (!codeInfos.length) return void 0;
65
+ return Object.assign({}, ...codeInfos);
66
+ };
67
+ const getReferenceFiber = (baseFiber) => {
68
+ if (!baseFiber) return void 0;
69
+ const directParent = getDirectParentFiber(baseFiber);
70
+ if (!directParent) return void 0;
71
+ const isParentNative = isNativeTagFiber(directParent);
72
+ const isOnlyOneChild = !directParent.child.sibling;
73
+ let referenceFiber = !isParentNative && isOnlyOneChild ? directParent : baseFiber;
74
+ const originReferenceFiber = referenceFiber;
75
+ while (referenceFiber) {
76
+ if (getCodeInfoFromFiber(referenceFiber)) return referenceFiber;
77
+ referenceFiber = referenceFiber.return;
78
+ }
79
+ return originReferenceFiber;
80
+ };
81
+ const getElementCodeInfo = (element) => {
82
+ const fiber = getElementFiberUpward(element);
83
+ const referenceFiber = getReferenceFiber(fiber);
84
+ return getCodeInfoFromFiber(referenceFiber);
85
+ };
86
+ const getNamedFiber = (baseFiber) => {
87
+ var _a, _b;
88
+ let fiber = baseFiber;
89
+ let originNamedFiber;
90
+ while (fiber) {
91
+ let parent = (_a = fiber.return) != null ? _a : void 0;
92
+ let forwardParent;
93
+ while (isReactSymbolFiber(parent)) {
94
+ if (isForwardRef(parent)) {
95
+ forwardParent = parent;
96
+ }
97
+ parent = (_b = parent == null ? void 0 : parent.return) != null ? _b : void 0;
98
+ }
99
+ if (forwardParent) {
100
+ fiber = forwardParent;
101
+ }
102
+ if (getFiberName(fiber)) {
103
+ if (!originNamedFiber) originNamedFiber = fiber;
104
+ if (getCodeInfoFromFiber(fiber)) return fiber;
105
+ }
106
+ fiber = parent;
107
+ }
108
+ return originNamedFiber;
109
+ };
110
+ const getElementInspect = (element) => {
111
+ const fiber = getElementFiberUpward(element);
112
+ const referenceFiber = getReferenceFiber(fiber);
113
+ const namedFiber = getNamedFiber(referenceFiber);
114
+ const fiberName = getFiberName(namedFiber);
115
+ const nodeName = element.nodeName.toLowerCase();
116
+ const title = fiberName != null ? fiberName : nodeName;
117
+ return {
118
+ fiber: referenceFiber,
119
+ name: fiberName,
120
+ title
121
+ };
122
+ };
123
+ export {
124
+ getCodeInfoFromDebugSource,
125
+ getCodeInfoFromFiber,
126
+ getCodeInfoFromProps,
127
+ getElementCodeInfo,
128
+ getElementInspect,
129
+ getNamedFiber,
130
+ getReferenceFiber
131
+ };
@@ -1,7 +1,8 @@
1
- export function getNestedBoundingClientRect(node) {
1
+ import "../../chunk-I4E63NIC.mjs";
2
+ function getNestedBoundingClientRect(node) {
2
3
  return node.getBoundingClientRect();
3
4
  }
4
- export function getElementDimensions(domElement) {
5
+ function getElementDimensions(domElement) {
5
6
  const calculatedStyle = window.getComputedStyle(domElement);
6
7
  return {
7
8
  borderLeft: Number.parseInt(calculatedStyle.borderLeftWidth, 10),
@@ -18,3 +19,7 @@ export function getElementDimensions(domElement) {
18
19
  paddingBottom: Number.parseInt(calculatedStyle.paddingBottom, 10)
19
20
  };
20
21
  }
22
+ export {
23
+ getElementDimensions,
24
+ getNestedBoundingClientRect
25
+ };