@refinedev/devtools 1.1.37 → 1.2.1

package/src/utilities/use-selector.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   getElementFromFiber,
   getFiberFromElement,
@@ -7,62 +8,31 @@ import {
   getParentOfFiber,
 } from "@aliemir/dom-to-fiber-utils";
 import { DevToolsContext } from "@refinedev/devtools-shared";
-import debounce from "lodash/debounce";
-import React from "react";
 
 type Fiber = Exclude<ReturnType<typeof getFiberFromElement>, null>;
 
+type SelectableElement = {
+  element: HTMLElement;
+  name: string;
+};
+
 export const useSelector = (active: boolean) => {
   const { devtoolsUrl } = React.useContext(DevToolsContext);
-  const [traceItems, setTraceItems] = React.useState<string[]>([]);
-
-  React.useEffect(() => {
-    if (active) {
-      fetch(
-        `${devtoolsUrl ?? "http://localhost:5001"}/api/unique-trace-items`,
-      ).then((res) =>
-        res.json().then((data: { data: string[] }) => setTraceItems(data.data)),
-      );
-    }
-  }, [active, devtoolsUrl]);
-
-  const [selectedFiber, setSelectedFiber] = React.useState<{
-    stateNode: Fiber | null;
-    nameFiber: Fiber | null;
-  }>({
-    stateNode: null,
-    nameFiber: null,
-  });
-  const [activeFiber, setActiveFiber] = React.useState<{
-    stateNode: Fiber | null;
-    nameFiber: Fiber | null;
-    derived?: boolean;
-  }>({
-    stateNode: null,
-    nameFiber: null,
-    derived: false,
-  });
+  const [selectableElements, setSelectableElements] = React.useState<
+    SelectableElement[]
+  >([]);
 
-  React.useEffect(() => {
-    if (active) {
-      return () => {
-        setSelectedFiber({
-          stateNode: null,
-          nameFiber: null,
-        });
-        setActiveFiber({
-          stateNode: null,
-          nameFiber: null,
-          derived: false,
-        });
-      };
-    }
+  const fetchTraceItems = React.useCallback(async () => {
+    const response = await fetch(
+      `${devtoolsUrl ?? "http://localhost:5001"}/api/unique-trace-items`,
+    );
+    const data = await response.json();
 
-    return () => 0;
-  }, [active]);
+    return data.data as string[];
+  }, [devtoolsUrl]);
 
   const selectAppropriateFiber = React.useCallback(
-    (start: Fiber | null) => {
+    (start: Fiber | null, activeTraceItems: string[]) => {
       let fiber = start;
       let firstParentOfNodeWithName: Fiber | null;
       let fiberWithStateNode: Fiber | null;
@@ -74,7 +44,7 @@ export const useSelector = (active: boolean) => {
         firstParentOfNodeWithName = getFirstFiberHasName(fiber);
         // Get the first fiber node that has a state node (look up the tree)
         fiberWithStateNode = getFirstStateNodeFiber(firstParentOfNodeWithName);
-        acceptedName = traceItems.includes(
+        acceptedName = activeTraceItems.includes(
           getNameFromFiber(firstParentOfNodeWithName) ?? "",
         );
         if (!acceptedName) {
@@ -93,157 +63,78 @@ export const useSelector = (active: boolean) => {
         nameFiber: null,
       };
     },
-    [traceItems],
-  );
-
-  const pickFiber = React.useCallback(
-    (target: HTMLElement) => {
-      const fiber = getFiberFromElement(target);
-
-      setSelectedFiber(selectAppropriateFiber(fiber));
-      return;
-    },
-    [traceItems],
+    [],
   );
 
-  React.useEffect(() => {
-    if (
-      activeFiber.stateNode !== selectedFiber.stateNode ||
-      activeFiber.nameFiber !== selectedFiber.nameFiber
-    ) {
-      setActiveFiber({
-        stateNode: selectedFiber.stateNode,
-        nameFiber: selectedFiber.nameFiber,
-        derived: false,
-      });
-    }
-  }, [selectedFiber]);
-
-  const previousValues = React.useRef<{
-    rect: {
-      width: number;
-      height: number;
-      x: number;
-      y: number;
-    };
-    name: string;
-  }>({
-    rect: {
-      width: 0,
-      height: 0,
-      x: 0,
-      y: 0,
-    },
-    name: "",
-  });
+  const getUniqueNodes = React.useCallback((nodes: SelectableElement[]) => {
+    const uniques: SelectableElement[] = [];
 
-  const { rect, name } = React.useMemo(() => {
-    if (!active) {
-      return {
-        rect: {
-          width: 0,
-          height: 0,
-          x: 0,
-          y: 0,
-        },
-        name: "",
-      };
-    }
-    if (activeFiber.stateNode || activeFiber.nameFiber) {
-      // Get the element from the fiber with a state node
-      const element = activeFiber.stateNode
-        ? getElementFromFiber(activeFiber.stateNode)
-        : null;
-      // Get the name of the fiber node with a name
-      const fiberName = activeFiber.nameFiber
-        ? getNameFromFiber(activeFiber.nameFiber)
-        : null;
-
-      if (!element) {
-        return {
-          rect: previousValues.current.rect,
-          name: fiberName ?? previousValues.current.name,
-        };
+    nodes.forEach((node) => {
+      const isElementExist = uniques.find(
+        (item) => item.element === node.element,
+      );
+      if (!isElementExist) {
+        uniques.push(node);
+      }
+    });
+
+    return uniques;
+  }, []);
+
+  const traverseBodyNodes = React.useCallback(
+    (
+      node: HTMLElement | null,
+      activeTraceItems: string[],
+    ): SelectableElement[] => {
+      if (!node) {
+        return [];
       }
 
-      const bounding = element.getBoundingClientRect?.();
+      const items: SelectableElement[] = [];
 
-      if (!bounding) {
-        return {
-          rect: previousValues.current.rect,
-          name: fiberName ?? previousValues.current.name,
-        };
-      }
+      const fiber = getFiberFromElement(node);
+      const targetFiber = selectAppropriateFiber(fiber, activeTraceItems);
 
-      return {
-        rect: {
-          width: bounding.width,
-          height: bounding.height,
-          x: bounding.left,
-          y: bounding.top,
-        },
-        name: fiberName ?? previousValues.current.name,
-      };
-    }
+      if (targetFiber.nameFiber && targetFiber.stateNode) {
+        const element = getElementFromFiber(targetFiber.stateNode);
+        const name = getNameFromFiber(targetFiber.nameFiber);
+        if (element && name) {
+          items.push({
+            element,
+            name,
+          });
+        }
+      }
 
-    return previousValues.current;
-  }, [activeFiber, active]);
+      for (let i = 0; i < node?.children?.length ?? 0; i++) {
+        items.push(
+          ...traverseBodyNodes(
+            node.children[i] as HTMLElement,
+            activeTraceItems,
+          ),
+        );
+      }
 
-  previousValues.current = {
-    rect,
-    name,
-  };
+      return items;
+    },
+    [selectAppropriateFiber],
+  );
 
-  React.useEffect(() => {
-    if (active) {
-      const listener = (e: KeyboardEvent) => {
-        // if user presses shift, toggle the derived state and set the active fiber to the parent
-        if (e.key === "Shift" && activeFiber.stateNode) {
-          e.stopPropagation();
-          e.preventDefault();
-
-          const parent = getParentOfFiber(activeFiber.nameFiber);
-
-          const fibers = selectAppropriateFiber(parent);
-
-          if (fibers.nameFiber && fibers.stateNode) {
-            setActiveFiber({
-              ...fibers,
-              derived: true,
-            });
-            return;
-          }
-        }
-      };
+  const prepareSelector = React.useCallback(async () => {
+    const fetchedTraceItems = await fetchTraceItems();
+    const traversedNodes = traverseBodyNodes(document.body, fetchedTraceItems);
+    const uniqueNodes = getUniqueNodes(traversedNodes);
 
-      document.addEventListener("keydown", listener);
-      return () => document.removeEventListener("keydown", listener);
-    }
-    return () => 0;
-  }, [activeFiber, active]);
+    setSelectableElements(uniqueNodes);
+  }, [fetchTraceItems, traverseBodyNodes, getUniqueNodes]);
 
   React.useEffect(() => {
     if (active) {
-      let previousTarget: HTMLElement | null = null;
-      const listener = debounce((e: MouseEvent) => {
-        if (e?.target) {
-          if (previousTarget === e.target) {
-            return;
-          }
-          pickFiber(e.target as HTMLElement);
-          previousTarget = e.target as HTMLElement;
-        }
-      }, 50);
-
-      document.addEventListener("mousemove", listener);
-
-      return () => document.removeEventListener("mousemove", listener);
+      prepareSelector();
     }
-    return () => 0;
-  }, [active, pickFiber]);
+  }, [active, prepareSelector]);
 
   return {
-    rect,
-    name,
+    selectableElements,
   };
 };

package/dist/components/selector-box.d.cts

@@ -1,8 +0,0 @@
-export declare const SelectorBox: ({ width, height, x, y, name, }: {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    name: string;
-}) => JSX.Element;
-//# sourceMappingURL=selector-box.d.ts.map

package/dist/components/selector-box.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selector-box.d.ts","sourceRoot":"","sources":["../../src/components/selector-box.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW;WAOf,MAAM;YACL,MAAM;OACX,MAAM;OACN,MAAM;UACH,MAAM;iBAyFb,CAAC"}

package/dist/components/selector-box.d.mts

@@ -1,8 +0,0 @@
-export declare const SelectorBox: ({ width, height, x, y, name, }: {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    name: string;
-}) => JSX.Element;
-//# sourceMappingURL=selector-box.d.ts.map

package/dist/components/selector-box.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selector-box.d.ts","sourceRoot":"","sources":["../../src/components/selector-box.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW;WAOf,MAAM;YACL,MAAM;OACX,MAAM;OACN,MAAM;UACH,MAAM;iBAyFb,CAAC"}

package/dist/components/selector-box.d.ts

@@ -1,8 +0,0 @@
-export declare const SelectorBox: ({ width, height, x, y, name, }: {
-    width: number;
-    height: number;
-    x: number;
-    y: number;
-    name: string;
-}) => JSX.Element;
-//# sourceMappingURL=selector-box.d.ts.map

package/dist/components/selector-box.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selector-box.d.ts","sourceRoot":"","sources":["../../src/components/selector-box.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,WAAW;WAOf,MAAM;YACL,MAAM;OACX,MAAM;OACN,MAAM;UACH,MAAM;iBAyFb,CAAC"}

package/dist/components/selector-hint.d.cts

@@ -1,4 +0,0 @@
-export declare const SelectorHint: ({ active }: {
-    active: boolean;
-}) => JSX.Element;
-//# sourceMappingURL=selector-hint.d.ts.map

package/dist/components/selector-hint.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selector-hint.d.ts","sourceRoot":"","sources":["../../src/components/selector-hint.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;YAA0B,OAAO;iBAsDzD,CAAC"}

package/dist/components/selector-hint.d.mts

@@ -1,4 +0,0 @@
-export declare const SelectorHint: ({ active }: {
-    active: boolean;
-}) => JSX.Element;
-//# sourceMappingURL=selector-hint.d.ts.map

package/dist/components/selector-hint.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selector-hint.d.ts","sourceRoot":"","sources":["../../src/components/selector-hint.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;YAA0B,OAAO;iBAsDzD,CAAC"}

package/dist/components/selector-hint.d.ts

@@ -1,4 +0,0 @@
-export declare const SelectorHint: ({ active }: {
-    active: boolean;
-}) => JSX.Element;
-//# sourceMappingURL=selector-hint.d.ts.map

package/dist/components/selector-hint.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"selector-hint.d.ts","sourceRoot":"","sources":["../../src/components/selector-hint.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;YAA0B,OAAO;iBAsDzD,CAAC"}

package/src/components/selector-box.tsx

@@ -1,107 +0,0 @@
-import React from "react";
-import { ArrowUnionIcon } from "./icons/arrow-union-icon";
-
-const Y_OFFSET = 38;
-const X_OFFSET = 7;
-
-export const SelectorBox = ({
-  width,
-  height,
-  x,
-  y,
-  name,
-}: {
-  width: number;
-  height: number;
-  x: number;
-  y: number;
-  name: string;
-}) => {
-  const namePosition =
-    y > Y_OFFSET ? "top" : height > 3 * Y_OFFSET ? "inset" : "bottom";
-
-  const outlinePosition = x > X_OFFSET && y > X_OFFSET ? "outside" : "inside";
-
-  return (
-    <div
-      id="selector-box"
-      style={{
-        pointerEvents: "none",
-        position: "fixed",
-        opacity: name ? 1 : 0,
-        transitionProperty: "width, height, transform, opacity",
-        transitionDuration: "0.15s",
-        transitionTimingFunction: "ease-out",
-        border: "1.5px solid #47EBEB",
-        borderRadius: "4px",
-        background: "rgba(37,160,160, 0.25)",
-        backdropFilter: "sepia(30%) hue-rotate(180deg)",
-        zIndex: 99998,
-        ...(outlinePosition === "outside"
-          ? {
-              left: -6,
-              top: -6,
-              width: width + 10,
-              height: height + 10,
-              transform: `translate(${x}px, ${y}px)`,
-            }
-          : {
-              left: 0,
-              top: 0,
-              width: width - 10,
-              height: height - 20,
-              transform: `translate(${x + 4}px, ${y + 4}px)`,
-            }),
-      }}
-    >
-      <div
-        style={{
-          position: "absolute",
-          left: "-1.5px",
-          background: "#303450",
-          border: "1px solid #474E6B",
-          borderRadius: "4px",
-          padding: "8px 12px",
-          fontSize: "12px",
-          lineHeight: "16px",
-          fontWeight: 400,
-          color: "#ffffff",
-          display: name ? "block" : "none",
-          ...(namePosition === "top" && {
-            top: "-38px",
-          }),
-          ...(namePosition === "bottom" && {
-            bottom: "-38px",
-          }),
-          ...(namePosition === "inset" && {
-            top: "4px",
-            left: "8px",
-          }),
-        }}
-      >
-        {name}
-
-        <ArrowUnionIcon
-          style={{
-            position: "absolute",
-            left: "30%",
-            ...(namePosition === "top" && {
-              transform: "translateX(-50%) rotate(180deg)",
-              bottom: "-9px",
-            }),
-            ...(namePosition === "bottom" && {
-              transform: "translateX(-50%) ",
-              top: "-9px",
-            }),
-            ...(namePosition === "inset" && {
-              transform: "translateX(-50%) rotate(-90deg)",
-              top: "8px",
-              left: "-1px",
-            }),
-            display: name ? "block" : "none",
-          }}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/selector-hint.tsx

@@ -1,57 +0,0 @@
-import React from "react";
-
-export const SelectorHint = ({ active }: { active: boolean }) => {
-  return (
-    <div
-      style={{
-        color: "white",
-        pointerEvents: "none",
-        position: "absolute",
-        left: "calc(-50% - 144px - 14px)",
-        top: "-36px",
-        width: "max-content",
-        borderRadius: "8px",
-        backgroundColor: "#40414A",
-        opacity: active ? 1 : 0,
-        transitionDuration: "0.2s",
-        transitionProperty: "transform,opacity",
-        transitionTimingFunction: "ease-in-out",
-        padding: "8px",
-        fontSize: "12px",
-        lineHeight: "12px",
-        fontWeight: 400,
-        textShadow:
-          "0 0 2px #1D1E30, 1px 0 2px #1D1E30, -1px 0 2px #1D1E30, 0 1px 2px #1D1E30, 0 -1px 2px #1D1E30",
-      }}
-    >
-      <kbd
-        style={{
-          marginLeft: "4px",
-          padding: "2px 4px",
-          borderRadius: "2px",
-          background: "#1D1E30",
-          color: "#CFD7E2",
-          border: "none",
-          textShadow: "none",
-        }}
-      >
-        shift
-      </kbd>{" "}
-      to move to parent.
-      <kbd
-        style={{
-          marginLeft: "4px",
-          padding: "2px 4px",
-          borderRadius: "2px",
-          background: "#1D1E30",
-          color: "#CFD7E2",
-          border: "none",
-          textShadow: "none",
-        }}
-      >
-        space
-      </kbd>{" "}
-      to highlight in monitor.
-    </div>
-  );
-};