@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
@@ -1,10 +1,16 @@
1
1
  "use client";
2
- import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import "../chunk-I4E63NIC.mjs";
3
+ import { Fragment, jsx } from "react/jsx-runtime";
3
4
  import { useState, useEffect, useRef } from "react";
4
5
  import hotkeys from "hotkeys-js";
5
6
  import { useLayoutEffect, useEffectEvent, useMousePosition } from "./hooks";
6
7
  import { Overlay } from "./Overlay";
7
- import { setupHighlighter, getElementCodeInfo, getElementInspect, getReferenceFiber } from "./utils";
8
+ import {
9
+ setupHighlighter,
10
+ getElementCodeInfo,
11
+ getElementInspect,
12
+ getReferenceFiber
13
+ } from "./utils";
8
14
  import { getElementFiberUpward } from "./utils/fiber";
9
15
  const getParentElement = (element) => {
10
16
  let parent = element;
@@ -16,7 +22,7 @@ const getParentElement = (element) => {
16
22
  const parentFiber = parent.parentElement ? getElementFiberUpward(parent.parentElement) : void 0;
17
23
  const referenceFiber = getReferenceFiber(fiber);
18
24
  const parentReferenceFiber = parentFiber ? getReferenceFiber(parentFiber) : null;
19
- const currentName = referenceFiber === null || referenceFiber === void 0 ? void 0 : referenceFiber.pendingProps["data-miaoda-component-name"];
25
+ const currentName = referenceFiber == null ? void 0 : referenceFiber.pendingProps["data-miaoda-component-name"];
20
26
  const parentName = parentReferenceFiber ? parentReferenceFiber.pendingProps["data-miaoda-component-name"] : null;
21
27
  if (currentName && currentName !== parentName) {
22
28
  return parent;
@@ -25,62 +31,56 @@ const getParentElement = (element) => {
25
31
  }
26
32
  return;
27
33
  };
28
- export const defaultHotkeys = () => {
29
- var _navigator_platform;
30
- return ((_navigator_platform = navigator.platform) === null || _navigator_platform === void 0 ? void 0 : _navigator_platform.startsWith("Mac")) ? [
31
- "Ctrl",
32
- "Shift",
33
- "Command",
34
- "C"
35
- ] : [
36
- "Ctrl",
37
- "Shift",
38
- "Alt",
39
- "C"
40
- ];
34
+ const defaultHotkeys = () => {
35
+ var _a;
36
+ return ((_a = navigator.platform) == null ? void 0 : _a.startsWith("Mac")) ? ["Ctrl", "Shift", "Command", "C"] : ["Ctrl", "Shift", "Alt", "C"];
41
37
  };
42
- export const Inspector = (props) => {
43
- const { keys, onHoverElement, onClickElement, onInspectElement, active: controlledActive, onActiveChange, handleCodeInfo, disable = true, children } = props;
44
- const [isActive, setActive] = useState(controlledActive !== null && controlledActive !== void 0 ? controlledActive : false);
45
- const hotkey = keys === null ? null : (keys !== null && keys !== void 0 ? keys : []).join("+");
38
+ const Inspector = (props) => {
39
+ const {
40
+ keys,
41
+ onHoverElement,
42
+ onClickElement,
43
+ onInspectElement,
44
+ active: controlledActive,
45
+ onActiveChange,
46
+ handleCodeInfo,
47
+ disable = true,
48
+ children
49
+ } = props;
50
+ const [isActive, setActive] = useState(controlledActive != null ? controlledActive : false);
51
+ const hotkey = keys === null ? null : (keys != null ? keys : []).join("+");
46
52
  const overlayRef = useRef();
47
- const mouseRef = useMousePosition({
48
- disable
49
- });
53
+ const mouseRef = useMousePosition({ disable });
50
54
  useLayoutEffect(() => {
51
55
  if (controlledActive !== void 0) {
52
56
  setActive(controlledActive);
53
57
  }
54
- }, [
55
- controlledActive
56
- ]);
58
+ }, [controlledActive]);
57
59
  const activate = useEffectEvent(() => {
58
- onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(true);
60
+ onActiveChange == null ? void 0 : onActiveChange(true);
59
61
  if (controlledActive === void 0) {
60
62
  setActive(true);
61
63
  }
62
64
  });
63
65
  const deactivate = useEffectEvent(() => {
64
- onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
66
+ onActiveChange == null ? void 0 : onActiveChange(false);
65
67
  if (controlledActive === void 0) {
66
68
  setActive(false);
67
69
  }
68
70
  });
69
71
  const handleHoverElement = useEffectEvent((element) => {
70
- var _overlay_inspect;
72
+ var _a;
71
73
  const overlay = overlayRef.current;
72
74
  const targetElement = getParentElement(element);
73
75
  if (!targetElement) {
74
76
  return;
75
77
  }
76
78
  const codeInfo = getElementCodeInfo(targetElement);
77
- const relativePath = codeInfo === null || codeInfo === void 0 ? void 0 : codeInfo.relativePath;
78
- const absolutePath = codeInfo === null || codeInfo === void 0 ? void 0 : codeInfo.absolutePath;
79
+ const relativePath = codeInfo == null ? void 0 : codeInfo.relativePath;
80
+ const absolutePath = codeInfo == null ? void 0 : codeInfo.absolutePath;
79
81
  const { fiber, name, title } = getElementInspect(targetElement);
80
- overlay === null || overlay === void 0 ? void 0 : (_overlay_inspect = overlay.inspect) === null || _overlay_inspect === void 0 ? void 0 : _overlay_inspect.call(overlay, [
81
- targetElement
82
- ], title, relativePath !== null && relativePath !== void 0 ? relativePath : absolutePath);
83
- onHoverElement === null || onHoverElement === void 0 ? void 0 : onHoverElement({
82
+ (_a = overlay == null ? void 0 : overlay.inspect) == null ? void 0 : _a.call(overlay, [targetElement], title, relativePath != null ? relativePath : absolutePath);
83
+ onHoverElement == null ? void 0 : onHoverElement({
84
84
  element: targetElement,
85
85
  fiber,
86
86
  codeInfo,
@@ -94,7 +94,7 @@ export const Inspector = (props) => {
94
94
  }
95
95
  const codeInfo = getElementCodeInfo(targetElement);
96
96
  const { fiber, name, title } = getElementInspect(targetElement);
97
- onClickElement === null || onClickElement === void 0 ? void 0 : onClickElement({
97
+ onClickElement == null ? void 0 : onClickElement({
98
98
  element: targetElement,
99
99
  fiber,
100
100
  codeInfo,
@@ -102,7 +102,7 @@ export const Inspector = (props) => {
102
102
  title
103
103
  });
104
104
  if (fiber && codeInfo) {
105
- onInspectElement === null || onInspectElement === void 0 ? void 0 : onInspectElement({
105
+ onInspectElement == null ? void 0 : onInspectElement({
106
106
  element: targetElement,
107
107
  fiber,
108
108
  codeInfo,
@@ -112,8 +112,7 @@ export const Inspector = (props) => {
112
112
  }
113
113
  });
114
114
  const startInspect = useEffectEvent(() => {
115
- if (overlayRef.current || disable)
116
- return;
115
+ if (overlayRef.current || disable) return;
117
116
  const overlay = new Overlay(handleCodeInfo);
118
117
  overlayRef.current = overlay;
119
118
  hotkeys(`esc`, deactivate);
@@ -124,12 +123,11 @@ export const Inspector = (props) => {
124
123
  overlay.setRemoveCallback(stopCallback);
125
124
  const initPoint = mouseRef.current;
126
125
  const initElement = document.elementFromPoint(initPoint.x, initPoint.y);
127
- if (initElement)
128
- handleHoverElement(initElement);
126
+ if (initElement) handleHoverElement(initElement);
129
127
  });
130
128
  const stopInspect = useEffectEvent(() => {
131
- var _overlayRef_current;
132
- (_overlayRef_current = overlayRef.current) === null || _overlayRef_current === void 0 ? void 0 : _overlayRef_current.remove();
129
+ var _a;
130
+ (_a = overlayRef.current) == null ? void 0 : _a.remove();
133
131
  overlayRef.current = void 0;
134
132
  hotkeys.unbind(`esc`, deactivate);
135
133
  });
@@ -140,13 +138,11 @@ export const Inspector = (props) => {
140
138
  stopInspect();
141
139
  }
142
140
  return stopInspect;
143
- }, [
144
- isActive
145
- ]);
141
+ }, [isActive]);
146
142
  useEffect(() => {
147
143
  const handleScroll = () => {
148
- var _overlayRef_current;
149
- (_overlayRef_current = overlayRef.current) === null || _overlayRef_current === void 0 ? void 0 : _overlayRef_current.clearRect();
144
+ var _a;
145
+ (_a = overlayRef.current) == null ? void 0 : _a.clearRect();
150
146
  };
151
147
  window.addEventListener("scroll", handleScroll, true);
152
148
  return () => {
@@ -169,11 +165,10 @@ export const Inspector = (props) => {
169
165
  };
170
166
  }
171
167
  return;
172
- }, [
173
- hotkey,
174
- disable
175
- ]);
176
- return /* @__PURE__ */ _jsx(_Fragment, {
177
- children: children !== null && children !== void 0 ? children : null
178
- });
168
+ }, [hotkey, disable]);
169
+ return /* @__PURE__ */ jsx(Fragment, { children: children != null ? children : null });
170
+ };
171
+ export {
172
+ Inspector,
173
+ defaultHotkeys
179
174
  };
@@ -1,4 +1,8 @@
1
- import { getElementDimensions, getNestedBoundingClientRect } from "./utils";
1
+ import "../chunk-I4E63NIC.mjs";
2
+ import {
3
+ getElementDimensions,
4
+ getNestedBoundingClientRect
5
+ } from "./utils";
2
6
  const overlayStyles = {
3
7
  padding: "transparent",
4
8
  margin: "transparent",
@@ -51,24 +55,6 @@ function findTipPos(dims, bounds, tipSize) {
51
55
  };
52
56
  }
53
57
  class OverlayRect {
54
- remove() {
55
- if (this.node.parentNode) {
56
- this.node.parentNode.removeChild(this.node);
57
- }
58
- }
59
- update(box, dims) {
60
- boxWrap(dims, "margin", this.node);
61
- boxWrap(dims, "border", this.border);
62
- boxWrap(dims, "padding", this.padding);
63
- Object.assign(this.content.style, {
64
- height: `${box.height - dims.borderTop - dims.borderBottom - dims.paddingTop - dims.paddingBottom}px`,
65
- width: `${box.width - dims.borderLeft - dims.borderRight - dims.paddingLeft - dims.paddingRight}px`
66
- });
67
- Object.assign(this.node.style, {
68
- top: `${box.top - dims.marginTop}px`,
69
- left: `${box.left - dims.marginLeft}px`
70
- });
71
- }
72
58
  constructor(doc, container) {
73
59
  this.node = doc.createElement("div");
74
60
  this.border = doc.createElement("div");
@@ -88,21 +74,26 @@ class OverlayRect {
88
74
  this.padding.appendChild(this.content);
89
75
  container.prepend(this.node);
90
76
  }
91
- }
92
- class ClickOverlayRect {
93
77
  remove() {
94
78
  if (this.node.parentNode) {
95
79
  this.node.parentNode.removeChild(this.node);
96
80
  }
97
81
  }
98
82
  update(box, dims) {
83
+ boxWrap(dims, "margin", this.node);
84
+ boxWrap(dims, "border", this.border);
85
+ boxWrap(dims, "padding", this.padding);
86
+ Object.assign(this.content.style, {
87
+ height: `${box.height - dims.borderTop - dims.borderBottom - dims.paddingTop - dims.paddingBottom}px`,
88
+ width: `${box.width - dims.borderLeft - dims.borderRight - dims.paddingLeft - dims.paddingRight}px`
89
+ });
99
90
  Object.assign(this.node.style, {
100
- top: `${box.top - 1 - dims.marginTop}px`,
101
- left: `${box.left - 1 - dims.marginLeft}px`,
102
- width: `${box.width + dims.marginLeft + dims.marginRight + 2}px`,
103
- height: `${box.height + dims.marginTop + dims.marginBottom + 2}px`
91
+ top: `${box.top - dims.marginTop}px`,
92
+ left: `${box.left - dims.marginLeft}px`
104
93
  });
105
94
  }
95
+ }
96
+ class ClickOverlayRect {
106
97
  constructor(doc, container) {
107
98
  this.node = doc.createElement("div");
108
99
  this.border = doc.createElement("div");
@@ -124,36 +115,21 @@ class ClickOverlayRect {
124
115
  this.node.appendChild(this.border);
125
116
  container.appendChild(this.node);
126
117
  }
127
- }
128
- class OverlayTip {
129
118
  remove() {
130
- if (this.tip.parentNode) {
131
- this.tip.parentNode.removeChild(this.tip);
132
- }
133
- }
134
- updateText(name) {
135
- this.titleDiv.textContent = name;
136
- }
137
- updatePosition(dims, bounds) {
138
- const tipRect = this.tip.getBoundingClientRect();
139
- const tipPos = findTipPos(dims, bounds, {
140
- width: tipRect.width,
141
- height: tipRect.height
142
- });
143
- Object.assign(this.tip.style, tipPos.style);
144
- if (dims.width === 0 || dims.height === 0) {
145
- this.invisible();
146
- } else {
147
- Object.assign(this.tip.style, {
148
- display: "flex"
149
- });
119
+ if (this.node.parentNode) {
120
+ this.node.parentNode.removeChild(this.node);
150
121
  }
151
122
  }
152
- invisible() {
153
- Object.assign(this.tip.style, {
154
- display: "none"
123
+ update(box, dims) {
124
+ Object.assign(this.node.style, {
125
+ top: `${box.top - 1 - dims.marginTop}px`,
126
+ left: `${box.left - 1 - dims.marginLeft}px`,
127
+ width: `${box.width + dims.marginLeft + dims.marginRight + 2}px`,
128
+ height: `${box.height + dims.marginTop + dims.marginBottom + 2}px`
155
129
  });
156
130
  }
131
+ }
132
+ class OverlayTip {
157
133
  constructor(doc, container) {
158
134
  this.tip = doc.createElement("div");
159
135
  Object.assign(this.tip.style, {
@@ -187,8 +163,62 @@ class OverlayTip {
187
163
  this.tip.style.zIndex = "10000000";
188
164
  container.appendChild(this.tip);
189
165
  }
166
+ remove() {
167
+ if (this.tip.parentNode) {
168
+ this.tip.parentNode.removeChild(this.tip);
169
+ }
170
+ }
171
+ updateText(name) {
172
+ this.titleDiv.textContent = name;
173
+ }
174
+ updatePosition(dims, bounds) {
175
+ const tipRect = this.tip.getBoundingClientRect();
176
+ const tipPos = findTipPos(dims, bounds, {
177
+ width: tipRect.width,
178
+ height: tipRect.height
179
+ });
180
+ Object.assign(this.tip.style, tipPos.style);
181
+ if (dims.width === 0 || dims.height === 0) {
182
+ this.invisible();
183
+ } else {
184
+ Object.assign(this.tip.style, {
185
+ display: "flex"
186
+ });
187
+ }
188
+ }
189
+ invisible() {
190
+ Object.assign(this.tip.style, {
191
+ display: "none"
192
+ });
193
+ }
190
194
  }
191
- export class Overlay {
195
+ class Overlay {
196
+ constructor(handleCodeInfo) {
197
+ this.handleCodeInfo = handleCodeInfo;
198
+ const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
199
+ this.window = currentWindow;
200
+ const tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
201
+ this.tipBoundsWindow = tipBoundsWindow;
202
+ const doc = currentWindow.document;
203
+ this.container = doc.createElement("div");
204
+ this.container.style.zIndex = "10000000";
205
+ this.tip = new OverlayTip(doc, this.container);
206
+ this.rects = [];
207
+ this.removeCallback = () => {
208
+ };
209
+ let rafId = null;
210
+ this.resizeObserver = new ResizeObserver(() => {
211
+ if (rafId) {
212
+ cancelAnimationFrame(rafId);
213
+ }
214
+ rafId = requestAnimationFrame(() => {
215
+ if (this.currentElements && this.currentName) {
216
+ this.updatePositions(this.currentElements, this.currentName);
217
+ }
218
+ });
219
+ });
220
+ doc.body.appendChild(this.container);
221
+ }
192
222
  remove() {
193
223
  this.tip.remove();
194
224
  this.rects.forEach((rect) => {
@@ -209,7 +239,7 @@ export class Overlay {
209
239
  this.currentElements = nodes;
210
240
  while (this.rects.length > elements.length) {
211
241
  const rect = this.rects.pop();
212
- rect === null || rect === void 0 ? void 0 : rect.remove();
242
+ rect == null ? void 0 : rect.remove();
213
243
  }
214
244
  if (elements.length === 0) {
215
245
  return;
@@ -223,7 +253,7 @@ export class Overlay {
223
253
  const elements = nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE);
224
254
  while (this.rects.length > elements.length) {
225
255
  const rect = this.rects.pop();
226
- rect === null || rect === void 0 ? void 0 : rect.remove();
256
+ rect == null ? void 0 : rect.remove();
227
257
  }
228
258
  if (elements.length === 0) {
229
259
  return;
@@ -241,8 +271,14 @@ export class Overlay {
241
271
  const box = getNestedBoundingClientRect(element, this.window);
242
272
  const dims = getElementDimensions(element);
243
273
  outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
244
- outerBox.right = Math.max(outerBox.right, box.left + box.width + dims.marginRight);
245
- outerBox.bottom = Math.max(outerBox.bottom, box.top + box.height + dims.marginBottom);
274
+ outerBox.right = Math.max(
275
+ outerBox.right,
276
+ box.left + box.width + dims.marginRight
277
+ );
278
+ outerBox.bottom = Math.max(
279
+ outerBox.bottom,
280
+ box.top + box.height + dims.marginBottom
281
+ );
246
282
  outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
247
283
  const rect = this.rects[index];
248
284
  rect.update(box, dims);
@@ -257,55 +293,63 @@ export class Overlay {
257
293
  } else {
258
294
  this.tip.updateText(name);
259
295
  }
260
- const tipBounds = getNestedBoundingClientRect(this.tipBoundsWindow.document.documentElement, this.window);
261
- this.tip.updatePosition({
262
- top: outerBox.top,
263
- left: outerBox.left,
264
- height: outerBox.bottom - outerBox.top,
265
- width: outerBox.right - outerBox.left
266
- }, {
267
- top: tipBounds.top + this.tipBoundsWindow.scrollY,
268
- left: tipBounds.left + this.tipBoundsWindow.scrollX,
269
- height: this.tipBoundsWindow.innerHeight,
270
- width: this.tipBoundsWindow.innerWidth
271
- });
296
+ const tipBounds = getNestedBoundingClientRect(
297
+ this.tipBoundsWindow.document.documentElement,
298
+ this.window
299
+ );
300
+ this.tip.updatePosition(
301
+ {
302
+ top: outerBox.top,
303
+ left: outerBox.left,
304
+ height: outerBox.bottom - outerBox.top,
305
+ width: outerBox.right - outerBox.left
306
+ },
307
+ {
308
+ top: tipBounds.top + this.tipBoundsWindow.scrollY,
309
+ left: tipBounds.left + this.tipBoundsWindow.scrollX,
310
+ height: this.tipBoundsWindow.innerHeight,
311
+ width: this.tipBoundsWindow.innerWidth
312
+ }
313
+ );
272
314
  }
273
315
  clearRect() {
274
- var _this_rects;
275
- (_this_rects = this.rects) === null || _this_rects === void 0 ? void 0 : _this_rects.forEach((rect) => {
316
+ var _a;
317
+ (_a = this.rects) == null ? void 0 : _a.forEach((rect) => {
276
318
  rect.remove();
277
319
  });
278
320
  this.rects.length = 0;
279
321
  this.tip.invisible();
280
322
  }
281
- constructor(handleCodeInfo) {
282
- this.handleCodeInfo = handleCodeInfo;
323
+ }
324
+ class ClickOverlay {
325
+ constructor(positionUpdate) {
326
+ this.currentElement = null;
327
+ this.currentName = void 0;
328
+ this.positionUpdate = positionUpdate;
283
329
  const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
284
330
  this.window = currentWindow;
285
331
  const tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
286
332
  this.tipBoundsWindow = tipBoundsWindow;
287
333
  const doc = currentWindow.document;
288
334
  this.container = doc.createElement("div");
289
- this.container.style.zIndex = "10000000";
335
+ this.container.style.zIndex = "9999999";
290
336
  this.tip = new OverlayTip(doc, this.container);
291
- this.rects = [];
292
- this.removeCallback = () => {
293
- };
337
+ this.rect = null;
294
338
  let rafId = null;
295
339
  this.resizeObserver = new ResizeObserver(() => {
340
+ var _a;
296
341
  if (rafId) {
297
342
  cancelAnimationFrame(rafId);
298
343
  }
299
344
  rafId = requestAnimationFrame(() => {
300
- if (this.currentElements && this.currentName) {
301
- this.updatePositions(this.currentElements, this.currentName);
345
+ if (this.currentElement) {
346
+ this.updatePosition(this.currentElement);
302
347
  }
303
348
  });
349
+ (_a = this.positionUpdate) == null ? void 0 : _a.call(this);
304
350
  });
305
351
  doc.body.appendChild(this.container);
306
352
  }
307
- }
308
- export class ClickOverlay {
309
353
  remove() {
310
354
  this.tip.remove();
311
355
  if (this.rect) {
@@ -334,7 +378,7 @@ export class ClickOverlay {
334
378
  this.resizeObserver.observe(element);
335
379
  }
336
380
  updatePosition(element) {
337
- var _this_rect;
381
+ var _a;
338
382
  const outerBox = {
339
383
  top: Number.POSITIVE_INFINITY,
340
384
  right: Number.NEGATIVE_INFINITY,
@@ -344,57 +388,45 @@ export class ClickOverlay {
344
388
  const box = getNestedBoundingClientRect(element, this.window);
345
389
  const dims = getElementDimensions(element);
346
390
  outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
347
- outerBox.right = Math.max(outerBox.right, box.left + box.width + dims.marginRight);
348
- outerBox.bottom = Math.max(outerBox.bottom, box.top + box.height + dims.marginBottom);
391
+ outerBox.right = Math.max(
392
+ outerBox.right,
393
+ box.left + box.width + dims.marginRight
394
+ );
395
+ outerBox.bottom = Math.max(
396
+ outerBox.bottom,
397
+ box.top + box.height + dims.marginBottom
398
+ );
349
399
  outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
350
- (_this_rect = this.rect) === null || _this_rect === void 0 ? void 0 : _this_rect.update(box, dims);
351
- const tipBounds = getNestedBoundingClientRect(this.tipBoundsWindow.document.documentElement, this.window);
400
+ (_a = this.rect) == null ? void 0 : _a.update(box, dims);
401
+ const tipBounds = getNestedBoundingClientRect(
402
+ this.tipBoundsWindow.document.documentElement,
403
+ this.window
404
+ );
352
405
  if (box.width === 0 || box.height === 0) {
353
406
  this.tip.invisible();
354
407
  }
355
- this.tip.updatePosition({
356
- top: outerBox.top,
357
- left: outerBox.left,
358
- height: outerBox.bottom - outerBox.top,
359
- width: outerBox.right - outerBox.left
360
- }, {
361
- top: tipBounds.top + this.tipBoundsWindow.scrollY,
362
- left: tipBounds.left + this.tipBoundsWindow.scrollX,
363
- height: this.tipBoundsWindow.innerHeight,
364
- width: this.tipBoundsWindow.innerWidth
365
- });
408
+ this.tip.updatePosition(
409
+ {
410
+ top: outerBox.top,
411
+ left: outerBox.left,
412
+ height: outerBox.bottom - outerBox.top,
413
+ width: outerBox.right - outerBox.left
414
+ },
415
+ {
416
+ top: tipBounds.top + this.tipBoundsWindow.scrollY,
417
+ left: tipBounds.left + this.tipBoundsWindow.scrollX,
418
+ height: this.tipBoundsWindow.innerHeight,
419
+ width: this.tipBoundsWindow.innerWidth
420
+ }
421
+ );
366
422
  }
367
423
  clearRect() {
368
- var _this_rect;
369
- (_this_rect = this.rect) === null || _this_rect === void 0 ? void 0 : _this_rect.remove();
424
+ var _a;
425
+ (_a = this.rect) == null ? void 0 : _a.remove();
370
426
  this.tip.invisible();
371
427
  }
372
- constructor(positionUpdate) {
373
- this.currentElement = null;
374
- this.currentName = void 0;
375
- this.positionUpdate = positionUpdate;
376
- const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
377
- this.window = currentWindow;
378
- const tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
379
- this.tipBoundsWindow = tipBoundsWindow;
380
- const doc = currentWindow.document;
381
- this.container = doc.createElement("div");
382
- this.container.style.zIndex = "9999999";
383
- this.tip = new OverlayTip(doc, this.container);
384
- this.rect = null;
385
- let rafId = null;
386
- this.resizeObserver = new ResizeObserver(() => {
387
- var _this_positionUpdate, _this;
388
- if (rafId) {
389
- cancelAnimationFrame(rafId);
390
- }
391
- rafId = requestAnimationFrame(() => {
392
- if (this.currentElement) {
393
- this.updatePosition(this.currentElement);
394
- }
395
- });
396
- (_this_positionUpdate = (_this = this).positionUpdate) === null || _this_positionUpdate === void 0 ? void 0 : _this_positionUpdate.call(_this);
397
- });
398
- doc.body.appendChild(this.container);
399
- }
400
428
  }
429
+ export {
430
+ ClickOverlay,
431
+ Overlay
432
+ };
@@ -0,0 +1,17 @@
1
+ import "../../chunk-I4E63NIC.mjs";
2
+ import { useMemo, useRef } from "react";
3
+ const useEffectEvent = (callback) => {
4
+ const callbackRef = useRef(callback);
5
+ callbackRef.current = useMemo(() => callback, [callback]);
6
+ const stableRef = useRef();
7
+ if (!stableRef.current) {
8
+ stableRef.current = function(...args) {
9
+ var _a;
10
+ return (_a = callbackRef.current) == null ? void 0 : _a.apply(this, args);
11
+ };
12
+ }
13
+ return stableRef.current;
14
+ };
15
+ export {
16
+ useEffectEvent
17
+ };
@@ -0,0 +1,9 @@
1
+ import "../../chunk-I4E63NIC.mjs";
2
+ var _a;
3
+ import { useEffect, useLayoutEffect as _useLayoutEffect } from "react";
4
+ const useLayoutEffect = typeof window !== "undefined" && // @ts-expect-error `window` is not available in SSR
5
+ // eslint-disable-next-line no-restricted-syntax
6
+ ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.createElement) ? _useLayoutEffect : useEffect;
7
+ export {
8
+ useLayoutEffect
9
+ };
@@ -1,5 +1,8 @@
1
+ import "../../chunk-I4E63NIC.mjs";
1
2
  import { useEffect, useRef } from "react";
2
- export const useMousePosition = ({ disable }) => {
3
+ const useMousePosition = ({
4
+ disable
5
+ }) => {
3
6
  const mouseRef = useRef({
4
7
  x: 0,
5
8
  y: 0
@@ -15,8 +18,9 @@ export const useMousePosition = ({ disable }) => {
15
18
  return () => {
16
19
  document.removeEventListener("mousemove", recordMousePoint, true);
17
20
  };
18
- }, [
19
- disable
20
- ]);
21
+ }, [disable]);
21
22
  return mouseRef;
22
23
  };
24
+ export {
25
+ useMousePosition
26
+ };
@@ -0,0 +1,5 @@
1
+ import "../chunk-I4E63NIC.mjs";
2
+ import { Inspector } from "./Inspector";
3
+ export {
4
+ Inspector
5
+ };