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

package/LICENSE

@@ -0,0 +1,13 @@
+MIT License
+
+Copyright (c) 2024 Lark Technologies Pte. Ltd. and/or its affiliates
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted,provided that the above copyright notice and this permission notice appear in all copies.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE
+INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO
+EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR
+CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE,
+DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
+ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @lark-apaas/miaoda-inspector

package/dist/es/Inspector/Inspector.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import hotkeys from "hotkeys-js";
+import { useLayoutEffect, useEffectEvent, useMousePosition } from "./hooks";
+import { Overlay } from "./Overlay";
+import { setupHighlighter, getElementCodeInfo, getElementInspect, getReferenceFiber } from "./utils";
+import { getElementFiberUpward } from "./utils/fiber";
+const getParentElement = (element) => {
+  let parent = element;
+  while (parent && parent.tagName !== "HTML") {
+    if (parent.dataset.miaodaComponentName) {
+      return parent;
+    }
+    const fiber = getElementFiberUpward(parent);
+    const parentFiber = parent.parentElement ? getElementFiberUpward(parent.parentElement) : void 0;
+    const referenceFiber = getReferenceFiber(fiber);
+    const parentReferenceFiber = parentFiber ? getReferenceFiber(parentFiber) : null;
+    const currentName = referenceFiber === null || referenceFiber === void 0 ? 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;
+};
+export 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"
+  ];
+};
+export const Inspector = (props) => {
+  const { keys, onHoverElement, onClickElement, onInspectElement, active: controlledActive, onActiveChange, handleCodeInfo, disable = true, children } = props;
+  const [isActive, setActive] = useState(controlledActive !== null && controlledActive !== void 0 ? controlledActive : false);
+  const hotkey = keys === null ? null : (keys !== null && keys !== void 0 ? keys : []).join("+");
+  const overlayRef = useRef();
+  const mouseRef = useMousePosition({
+    disable
+  });
+  useLayoutEffect(() => {
+    if (controlledActive !== void 0) {
+      setActive(controlledActive);
+    }
+  }, [
+    controlledActive
+  ]);
+  const activate = useEffectEvent(() => {
+    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(true);
+    if (controlledActive === void 0) {
+      setActive(true);
+    }
+  });
+  const deactivate = useEffectEvent(() => {
+    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
+    if (controlledActive === void 0) {
+      setActive(false);
+    }
+  });
+  const handleHoverElement = useEffectEvent((element) => {
+    var _overlay_inspect;
+    const overlay = overlayRef.current;
+    const targetElement = getParentElement(element);
+    if (!targetElement) {
+      return;
+    }
+    const codeInfo = 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 } = 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({
+      element: targetElement,
+      fiber,
+      codeInfo,
+      name
+    });
+  });
+  const handleClickElement = useEffectEvent((element) => {
+    const targetElement = getParentElement(element);
+    if (!targetElement) {
+      return;
+    }
+    const codeInfo = getElementCodeInfo(targetElement);
+    const { fiber, name, title } = getElementInspect(targetElement);
+    onClickElement === null || onClickElement === void 0 ? void 0 : onClickElement({
+      element: targetElement,
+      fiber,
+      codeInfo,
+      name,
+      title
+    });
+    if (fiber && codeInfo) {
+      onInspectElement === null || onInspectElement === void 0 ? void 0 : onInspectElement({
+        element: targetElement,
+        fiber,
+        codeInfo,
+        name,
+        title
+      });
+    }
+  });
+  const startInspect = useEffectEvent(() => {
+    if (overlayRef.current || disable)
+      return;
+    const overlay = new Overlay(handleCodeInfo);
+    overlayRef.current = overlay;
+    hotkeys(`esc`, deactivate);
+    const stopCallback = setupHighlighter({
+      onPointerOver: handleHoverElement,
+      onClick: handleClickElement
+    });
+    overlay.setRemoveCallback(stopCallback);
+    const initPoint = mouseRef.current;
+    const initElement = document.elementFromPoint(initPoint.x, initPoint.y);
+    if (initElement)
+      handleHoverElement(initElement);
+  });
+  const stopInspect = useEffectEvent(() => {
+    var _overlayRef_current;
+    (_overlayRef_current = overlayRef.current) === null || _overlayRef_current === void 0 ? void 0 : _overlayRef_current.remove();
+    overlayRef.current = void 0;
+    hotkeys.unbind(`esc`, deactivate);
+  });
+  useEffect(() => {
+    if (isActive) {
+      startInspect();
+    } else {
+      stopInspect();
+    }
+    return stopInspect;
+  }, [
+    isActive
+  ]);
+  useEffect(() => {
+    const handleScroll = () => {
+      var _overlayRef_current;
+      (_overlayRef_current = overlayRef.current) === null || _overlayRef_current === void 0 ? void 0 : _overlayRef_current.clearRect();
+    };
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, []);
+  useEffect(() => {
+    const handleHotKeys = () => {
+      if (overlayRef.current) {
+        deactivate();
+      } else {
+        activate();
+      }
+    };
+    const bindKey = hotkey === null || disable ? null : hotkey || defaultHotkeys().join("+");
+    if (bindKey) {
+      hotkeys(bindKey, handleHotKeys);
+      return () => {
+        hotkeys.unbind(bindKey, handleHotKeys);
+      };
+    }
+    return;
+  }, [
+    hotkey,
+    disable
+  ]);
+  return /* @__PURE__ */ _jsx(_Fragment, {
+    children: children !== null && children !== void 0 ? children : null
+  });
+};

package/dist/es/Inspector/Overlay.js

@@ -0,0 +1,400 @@
+import { getElementDimensions, getNestedBoundingClientRect } from "./utils";
+const overlayStyles = {
+  padding: "transparent",
+  margin: "transparent",
+  border: "transparent"
+};
+function boxWrap(dims, what, node) {
+  Object.assign(node.style, {
+    borderTopWidth: `${dims[`${what}Top`]}px`,
+    borderLeftWidth: `${dims[`${what}Left`]}px`,
+    borderRightWidth: `${dims[`${what}Right`]}px`,
+    borderBottomWidth: `${dims[`${what}Bottom`]}px`,
+    borderStyle: "solid"
+  });
+}
+function findTipPos(dims, bounds, tipSize) {
+  const tipHeight = Math.max(tipSize.height, 20);
+  const tipWidth = Math.max(tipSize.width, 60);
+  const margin = 4;
+  let top;
+  if (dims.top - tipHeight - margin >= bounds.top) {
+    top = dims.top - tipHeight - margin;
+  } else if (dims.top + dims.height + tipHeight <= bounds.top + bounds.height) {
+    if (dims.top + dims.height < bounds.top + 0) {
+      top = bounds.top + margin;
+    } else {
+      top = dims.top + dims.height + margin;
+    }
+  } else if (dims.top - tipHeight <= bounds.top + bounds.height) {
+    if (dims.top - tipHeight - margin < bounds.top + margin) {
+      top = bounds.top + margin;
+    } else {
+      top = dims.top - tipHeight - margin;
+    }
+  } else {
+    top = bounds.top + bounds.height - tipHeight - margin;
+  }
+  let { left } = dims;
+  if (dims.left < bounds.left) {
+    left = bounds.left;
+  }
+  if (dims.left + tipWidth > bounds.left + bounds.width) {
+    left = bounds.left + bounds.width - tipWidth;
+  }
+  return {
+    style: {
+      top: `${top}px`,
+      // 目前 box 的样式是设置的 outline，为了对齐要向左偏移 1px
+      left: `${left - 1}px`
+    }
+  };
+}
+class OverlayRect {
+  remove() {
+    if (this.node.parentNode) {
+      this.node.parentNode.removeChild(this.node);
+    }
+  }
+  update(box, dims) {
+    boxWrap(dims, "margin", this.node);
+    boxWrap(dims, "border", this.border);
+    boxWrap(dims, "padding", this.padding);
+    Object.assign(this.content.style, {
+      height: `${box.height - dims.borderTop - dims.borderBottom - dims.paddingTop - dims.paddingBottom}px`,
+      width: `${box.width - dims.borderLeft - dims.borderRight - dims.paddingLeft - dims.paddingRight}px`
+    });
+    Object.assign(this.node.style, {
+      top: `${box.top - dims.marginTop}px`,
+      left: `${box.left - dims.marginLeft}px`
+    });
+  }
+  constructor(doc, container) {
+    this.node = doc.createElement("div");
+    this.border = doc.createElement("div");
+    this.padding = doc.createElement("div");
+    this.content = doc.createElement("div");
+    this.border.style.borderColor = overlayStyles.border;
+    this.padding.style.borderColor = overlayStyles.padding;
+    Object.assign(this.node.style, {
+      borderColor: overlayStyles.margin,
+      pointerEvents: "none",
+      position: "fixed",
+      outline: "1px dashed #1456f0"
+    });
+    this.node.style.zIndex = "10000000";
+    this.node.appendChild(this.border);
+    this.border.appendChild(this.padding);
+    this.padding.appendChild(this.content);
+    container.prepend(this.node);
+  }
+}
+class ClickOverlayRect {
+  remove() {
+    if (this.node.parentNode) {
+      this.node.parentNode.removeChild(this.node);
+    }
+  }
+  update(box, dims) {
+    Object.assign(this.node.style, {
+      top: `${box.top - 1 - dims.marginTop}px`,
+      left: `${box.left - 1 - dims.marginLeft}px`,
+      width: `${box.width + dims.marginLeft + dims.marginRight + 2}px`,
+      height: `${box.height + dims.marginTop + dims.marginBottom + 2}px`
+    });
+  }
+  constructor(doc, container) {
+    this.node = doc.createElement("div");
+    this.border = doc.createElement("div");
+    Object.assign(this.border.style, {
+      pointerEvents: "none",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      boxSizing: "border-box",
+      border: "1px solid #1456f0"
+    });
+    Object.assign(this.node.style, {
+      pointerEvents: "none",
+      position: "fixed",
+      zIndex: "9999999"
+    });
+    this.node.appendChild(this.border);
+    container.appendChild(this.node);
+  }
+}
+class OverlayTip {
+  remove() {
+    if (this.tip.parentNode) {
+      this.tip.parentNode.removeChild(this.tip);
+    }
+  }
+  updateText(name) {
+    this.titleDiv.textContent = name;
+  }
+  updatePosition(dims, bounds) {
+    const tipRect = this.tip.getBoundingClientRect();
+    const tipPos = findTipPos(dims, bounds, {
+      width: tipRect.width,
+      height: tipRect.height
+    });
+    Object.assign(this.tip.style, tipPos.style);
+    if (dims.width === 0 || dims.height === 0) {
+      this.invisible();
+    } else {
+      Object.assign(this.tip.style, {
+        display: "flex"
+      });
+    }
+  }
+  invisible() {
+    Object.assign(this.tip.style, {
+      display: "none"
+    });
+  }
+  constructor(doc, container) {
+    this.tip = doc.createElement("div");
+    Object.assign(this.tip.style, {
+      display: "flex",
+      flexFlow: "row nowrap",
+      alignItems: "center",
+      backgroundColor: "#1456f0",
+      borderRadius: "6px",
+      fontFamily: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace',
+      fontWeight: "bold",
+      padding: "1px 12px",
+      pointerEvents: "none",
+      position: "fixed",
+      fontSize: "14px",
+      lineHeight: "22px",
+      whiteSpace: "nowrap"
+    });
+    this.nameSpan = doc.createElement("span");
+    this.tip.appendChild(this.nameSpan);
+    Object.assign(this.nameSpan.style, {
+      display: "flex",
+      flexDirection: "column"
+    });
+    this.titleDiv = doc.createElement("div");
+    this.nameSpan.appendChild(this.titleDiv);
+    Object.assign(this.titleDiv.style, {
+      color: "#fff",
+      fontSize: "14px",
+      borderRadius: "6px"
+    });
+    this.tip.style.zIndex = "10000000";
+    container.appendChild(this.tip);
+  }
+}
+export class Overlay {
+  remove() {
+    this.tip.remove();
+    this.rects.forEach((rect) => {
+      rect.remove();
+    });
+    this.rects.length = 0;
+    if (this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+    this.removeCallback();
+  }
+  setRemoveCallback(callback) {
+    this.removeCallback = callback.bind(this);
+  }
+  inspect(nodes, name, info) {
+    this.resizeObserver.disconnect();
+    const elements = nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE);
+    this.currentElements = nodes;
+    while (this.rects.length > elements.length) {
+      const rect = this.rects.pop();
+      rect === null || rect === void 0 ? void 0 : rect.remove();
+    }
+    if (elements.length === 0) {
+      return;
+    }
+    elements.forEach((element) => {
+      this.resizeObserver.observe(element);
+    });
+    this.updatePositions(elements, name, info);
+  }
+  updatePositions(nodes, name, info) {
+    const elements = nodes.filter((node) => node.nodeType === Node.ELEMENT_NODE);
+    while (this.rects.length > elements.length) {
+      const rect = this.rects.pop();
+      rect === null || rect === void 0 ? void 0 : rect.remove();
+    }
+    if (elements.length === 0) {
+      return;
+    }
+    while (this.rects.length < elements.length) {
+      this.rects.push(new OverlayRect(this.window.document, this.container));
+    }
+    const outerBox = {
+      top: Number.POSITIVE_INFINITY,
+      right: Number.NEGATIVE_INFINITY,
+      bottom: Number.NEGATIVE_INFINITY,
+      left: Number.POSITIVE_INFINITY
+    };
+    elements.forEach((element, index) => {
+      const box = getNestedBoundingClientRect(element, this.window);
+      const dims = getElementDimensions(element);
+      outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
+      outerBox.right = Math.max(outerBox.right, box.left + box.width + dims.marginRight);
+      outerBox.bottom = Math.max(outerBox.bottom, box.top + box.height + dims.marginBottom);
+      outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
+      const rect = this.rects[index];
+      rect.update(box, dims);
+    });
+    if (!name) {
+      name = elements[0].nodeName.toLowerCase();
+    }
+    this.currentName = name;
+    if (this.handleCodeInfo) {
+      const [displayName] = this.handleCodeInfo(name || "", info);
+      this.tip.updateText(displayName);
+    } else {
+      this.tip.updateText(name);
+    }
+    const tipBounds = getNestedBoundingClientRect(this.tipBoundsWindow.document.documentElement, this.window);
+    this.tip.updatePosition({
+      top: outerBox.top,
+      left: outerBox.left,
+      height: outerBox.bottom - outerBox.top,
+      width: outerBox.right - outerBox.left
+    }, {
+      top: tipBounds.top + this.tipBoundsWindow.scrollY,
+      left: tipBounds.left + this.tipBoundsWindow.scrollX,
+      height: this.tipBoundsWindow.innerHeight,
+      width: this.tipBoundsWindow.innerWidth
+    });
+  }
+  clearRect() {
+    var _this_rects;
+    (_this_rects = this.rects) === null || _this_rects === void 0 ? void 0 : _this_rects.forEach((rect) => {
+      rect.remove();
+    });
+    this.rects.length = 0;
+    this.tip.invisible();
+  }
+  constructor(handleCodeInfo) {
+    this.handleCodeInfo = handleCodeInfo;
+    const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+    this.window = currentWindow;
+    const tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+    this.tipBoundsWindow = tipBoundsWindow;
+    const doc = currentWindow.document;
+    this.container = doc.createElement("div");
+    this.container.style.zIndex = "10000000";
+    this.tip = new OverlayTip(doc, this.container);
+    this.rects = [];
+    this.removeCallback = () => {
+    };
+    let rafId = null;
+    this.resizeObserver = new ResizeObserver(() => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(() => {
+        if (this.currentElements && this.currentName) {
+          this.updatePositions(this.currentElements, this.currentName);
+        }
+      });
+    });
+    doc.body.appendChild(this.container);
+  }
+}
+export class ClickOverlay {
+  remove() {
+    this.tip.remove();
+    if (this.rect) {
+      this.rect.remove();
+      this.rect = null;
+    }
+    this.currentElement = null;
+    this.resizeObserver.disconnect();
+    this.currentName = void 0;
+    if (this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  }
+  highlight(element, name) {
+    if (!this.rect) {
+      this.rect = new ClickOverlayRect(this.window.document, this.container);
+    }
+    this.resizeObserver.disconnect();
+    this.currentElement = element;
+    if (!name) {
+      name = element.nodeName.toLowerCase();
+    }
+    this.currentName = name;
+    this.tip.updateText(name);
+    this.updatePosition(element);
+    this.resizeObserver.observe(element);
+  }
+  updatePosition(element) {
+    var _this_rect;
+    const outerBox = {
+      top: Number.POSITIVE_INFINITY,
+      right: Number.NEGATIVE_INFINITY,
+      bottom: Number.NEGATIVE_INFINITY,
+      left: Number.POSITIVE_INFINITY
+    };
+    const box = getNestedBoundingClientRect(element, this.window);
+    const dims = getElementDimensions(element);
+    outerBox.top = Math.min(outerBox.top, box.top - dims.marginTop);
+    outerBox.right = Math.max(outerBox.right, box.left + box.width + dims.marginRight);
+    outerBox.bottom = Math.max(outerBox.bottom, box.top + box.height + dims.marginBottom);
+    outerBox.left = Math.min(outerBox.left, box.left - dims.marginLeft);
+    (_this_rect = this.rect) === null || _this_rect === void 0 ? void 0 : _this_rect.update(box, dims);
+    const tipBounds = getNestedBoundingClientRect(this.tipBoundsWindow.document.documentElement, this.window);
+    if (box.width === 0 || box.height === 0) {
+      this.tip.invisible();
+    }
+    this.tip.updatePosition({
+      top: outerBox.top,
+      left: outerBox.left,
+      height: outerBox.bottom - outerBox.top,
+      width: outerBox.right - outerBox.left
+    }, {
+      top: tipBounds.top + this.tipBoundsWindow.scrollY,
+      left: tipBounds.left + this.tipBoundsWindow.scrollX,
+      height: this.tipBoundsWindow.innerHeight,
+      width: this.tipBoundsWindow.innerWidth
+    });
+  }
+  clearRect() {
+    var _this_rect;
+    (_this_rect = this.rect) === null || _this_rect === void 0 ? void 0 : _this_rect.remove();
+    this.tip.invisible();
+  }
+  constructor(positionUpdate) {
+    this.currentElement = null;
+    this.currentName = void 0;
+    this.positionUpdate = positionUpdate;
+    const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+    this.window = currentWindow;
+    const tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
+    this.tipBoundsWindow = tipBoundsWindow;
+    const doc = currentWindow.document;
+    this.container = doc.createElement("div");
+    this.container.style.zIndex = "9999999";
+    this.tip = new OverlayTip(doc, this.container);
+    this.rect = null;
+    let rafId = null;
+    this.resizeObserver = new ResizeObserver(() => {
+      var _this_positionUpdate, _this;
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(() => {
+        if (this.currentElement) {
+          this.updatePosition(this.currentElement);
+        }
+      });
+      (_this_positionUpdate = (_this = this).positionUpdate) === null || _this_positionUpdate === void 0 ? void 0 : _this_positionUpdate.call(_this);
+    });
+    doc.body.appendChild(this.container);
+  }
+}

package/dist/es/Inspector/hooks/index.js

@@ -0,0 +1,3 @@
+export * from "./use-layout-effect";
+export * from "./use-effect-event";
+export * from "./use-mouse";

package/dist/es/Inspector/hooks/use-effect-event.js

@@ -0,0 +1,15 @@
+import { useMemo, useRef } from "react";
+export const useEffectEvent = (callback) => {
+  const callbackRef = useRef(callback);
+  callbackRef.current = useMemo(() => callback, [
+    callback
+  ]);
+  const stableRef = useRef();
+  if (!stableRef.current) {
+    stableRef.current = function(...args) {
+      var _callbackRef_current;
+      return (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.apply(this, args);
+    };
+  }
+  return stableRef.current;
+};

package/dist/es/Inspector/hooks/use-layout-effect.js

@@ -0,0 +1,3 @@
+var _window_document, _window;
+import { useEffect, useLayoutEffect as _useLayoutEffect } from "react";
+export const useLayoutEffect = typeof window !== "undefined" && ((_window = window) === null || _window === void 0 ? void 0 : (_window_document = _window.document) === null || _window_document === void 0 ? void 0 : _window_document.createElement) ? _useLayoutEffect : useEffect;

package/dist/es/Inspector/hooks/use-mouse.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+export const useMousePosition = ({ disable }) => {
+  const mouseRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const recordMousePoint = (ev) => {
+    mouseRef.current.x = ev.clientX;
+    mouseRef.current.y = ev.clientY;
+  };
+  useEffect(() => {
+    if (!disable) {
+      document.addEventListener("mousemove", recordMousePoint, true);
+    }
+    return () => {
+      document.removeEventListener("mousemove", recordMousePoint, true);
+    };
+  }, [
+    disable
+  ]);
+  return mouseRef;
+};

package/dist/es/Inspector/index.js

@@ -0,0 +1 @@
+export { Inspector } from "./Inspector";