packages

packages/devtools/src/utilities/get-devtools-url-from-env.ts

@@ -0,0 +1,20 @@
+const DEFAULT_DEVTOOLS_PORT = 5001;
+
+export const getDevtoolsUrlFromEnv = () => {
+  const PORT_FROM_ENV =
+    typeof __PROCESS_KEY__ !== "undefined" && "env" in __PROCESS_KEY__
+      ? __PROCESS_ENV_REFINE_DEVTOOLS_PORT_KEY__ ||
+        __PROCESS_ENV_NEXT_PUBLIC_REFINE_DEVTOOLS_PORT_KEY__ ||
+        __PROCESS_ENV_REACT_APP_REFINE_DEVTOOLS_PORT_KEY__
+      : typeof __IMPORT_META_KEY__ !== "undefined" && __IMPORT_META_KEY__.env
+        ? __IMPORT_META_ENV_REFINE_DEVTOOLS_PORT_KEY__ ||
+          __IMPORT_META_ENV_VITE_REFINE_DEVTOOLS_PORT_KEY__
+        : null;
+
+  const port = PORT_FROM_ENV || DEFAULT_DEVTOOLS_PORT;
+
+  return [`http://localhost:${port}`, `ws://localhost:${port}`] as [
+    httpUrl: string,
+    wsUrl: string,
+  ];
+};

packages/devtools/src/utilities/index.ts

@@ -0,0 +1,123 @@
+import type { Placement } from "src/interfaces/placement";
+
+export const getPanelToggleTransforms = (visible: boolean) => {
+  return visible ? "scaleX(1) translateY(0)" : "scaleX(0) translateY(25vw)";
+};
+
+export const SIZE = 50;
+export const BUFFER = 10;
+
+const PREFERRED_DEFAULT_WIDTH = () =>
+  typeof window !== "undefined" ? window.innerWidth * 0.7 : 1440 * 0.7; // 70% of window width
+const PREFERRED_DEFAULT_HEIGHT = () =>
+  typeof window !== "undefined" ? window.innerHeight * 0.7 : 900 * 0.7; // 70% of window height
+
+export const MIN_PANEL_WIDTH = 640;
+export const MIN_PANEL_HEIGHT = 360;
+
+export const getPinButtonTransform = (hover?: boolean) => {
+  return `translateY(${hover ? "0" : "50%"})`;
+};
+
+export const getPanelPosition = (placement: Placement) => {
+  switch (placement) {
+    case "left":
+      return {
+        left: `calc(${SIZE}px + ${BUFFER}px)`,
+        top: "50%",
+        transform: "translateY(-50%)",
+      };
+    case "right":
+      return {
+        right: `calc(${SIZE}px + ${BUFFER}px)`,
+        top: "50%",
+        transform: "translateY(-50%)",
+      };
+    case "top":
+      return {
+        left: "50%",
+        top: `calc(${SIZE}px + ${BUFFER}px)`,
+        transform: "translateX(-50%)",
+      };
+    case "bottom":
+      return {
+        left: "50%",
+        bottom: `calc(${SIZE}px + ${BUFFER}px)`,
+        transform: "translateX(-50%)",
+      };
+  }
+};
+
+export const getMaxPanelWidth = (placement: Placement) => {
+  switch (placement) {
+    case "left":
+    case "right":
+      return (
+        -BUFFER -
+        SIZE -
+        BUFFER +
+        (typeof window !== "undefined" ? window.innerWidth : 1440) -
+        BUFFER
+      );
+    case "top":
+    case "bottom":
+      return (
+        -BUFFER +
+        (typeof window !== "undefined" ? window.innerWidth : 1440) -
+        BUFFER
+      );
+  }
+};
+
+export const getMaxPanelHeight = (placement: Placement) => {
+  switch (placement) {
+    case "left":
+    case "right":
+      return (
+        -BUFFER +
+        (typeof window !== "undefined" ? window.innerHeight : 900) -
+        BUFFER
+      );
+    case "top":
+    case "bottom":
+      return (
+        -BUFFER -
+        SIZE -
+        BUFFER +
+        (typeof window !== "undefined" ? window.innerHeight : 900) -
+        BUFFER
+      );
+  }
+};
+
+export const getDefaultPanelSize = (
+  placement: Placement,
+  preferredSize?: { width: number; height: number },
+): { width: number; height: number } => {
+  const defaultPreferred = {
+    width: PREFERRED_DEFAULT_WIDTH(),
+    height: PREFERRED_DEFAULT_HEIGHT(),
+  };
+
+  const maxPanelWidth = getMaxPanelWidth(placement);
+  const maxPanelHeight = getMaxPanelHeight(placement);
+
+  const width = Math.min(
+    maxPanelWidth,
+    (preferredSize ?? defaultPreferred).width,
+  );
+  const height = Math.min(
+    maxPanelHeight,
+    (preferredSize ?? defaultPreferred).height,
+  );
+
+  return {
+    width: width,
+    height: height,
+  };
+};
+
+export const roundToEven = (num: number) => {
+  const rounded = Math.round(num);
+  return rounded % 2 === 0 ? rounded : rounded + 1;
+};

packages/devtools/src/utilities/selector-helpers.ts

@@ -0,0 +1,157 @@
+import {
+  getElementFromFiber,
+  getFiberFromElement,
+  getFirstFiberHasName,
+  getFirstStateNodeFiber,
+  getNameFromFiber,
+  getParentOfFiber,
+} from "@aliemir/dom-to-fiber-utils";
+
+type Fiber = Exclude<ReturnType<typeof getFiberFromElement>, null>;
+
+export type SelectableElement = {
+  element: HTMLElement;
+  name: string;
+};
+
+const getChildOfFiber = (fiber: Fiber | null) => {
+  if (!fiber) {
+    return null;
+  }
+
+  return fiber.child;
+};
+
+const getFirstHTMLElementFromFiberByChild = (fiber: Fiber | null) => {
+  let child = fiber;
+
+  while (child) {
+    const element = getElementFromFiber(child);
+    if (element && element instanceof HTMLElement) {
+      return element;
+    }
+
+    child = getChildOfFiber(child) as Fiber;
+  }
+
+  return null;
+};
+
+const getFirstHTMLElementFromFiberByParent = (fiber: Fiber | null) => {
+  let parent = fiber;
+
+  while (parent) {
+    const element = getElementFromFiber(parent);
+    if (element && element instanceof HTMLElement) {
+      return element;
+    }
+
+    parent = getParentOfFiber(parent) as Fiber;
+  }
+
+  return null;
+};
+
+const getFirstHTMLElementFromFiber = (
+  fiber: Fiber | null,
+): [element: HTMLElement, "child" | "parent" | "body"] => {
+  let element = getFirstHTMLElementFromFiberByChild(fiber);
+
+  if (element) {
+    return [element, "child"];
+  }
+
+  element = getFirstHTMLElementFromFiberByParent(fiber);
+
+  if (element) {
+    return [element, "parent"];
+  }
+
+  return [document.body, "body"];
+};
+
+const selectFiber = (start: Fiber | null, activeTraceItems: string[]) => {
+  let fiber = start;
+  let firstParentOfNodeWithName: Fiber | null = null;
+  let fiberWithStateNode: Fiber | null = null;
+
+  let acceptedName = false;
+
+  while (!acceptedName && fiber) {
+    // Get the first fiber node that has a name (look up the tree)
+    firstParentOfNodeWithName = getFirstFiberHasName(fiber);
+    // Get the first fiber node that has a state node (look up the tree)
+    fiberWithStateNode = getFirstStateNodeFiber(firstParentOfNodeWithName);
+    acceptedName = activeTraceItems.includes(
+      getNameFromFiber(firstParentOfNodeWithName) ?? "",
+    );
+    if (!acceptedName) {
+      fiber = getParentOfFiber(fiber);
+    }
+  }
+
+  if (fiberWithStateNode && firstParentOfNodeWithName) {
+    return {
+      stateNode: fiberWithStateNode,
+      nameFiber: firstParentOfNodeWithName,
+    };
+  }
+  return {
+    stateNode: null,
+    nameFiber: null,
+  };
+};
+
+export const filterInvisibleNodes = (nodes: SelectableElement[]) => {
+  return nodes.filter(
+    (item) => item.element.offsetWidth > 0 && item.element.offsetHeight > 0,
+  );
+};
+
+export const getUniqueNodes = (nodes: SelectableElement[]) => {
+  const uniques: SelectableElement[] = [];
+
+  nodes.forEach((node) => {
+    const isElementExist = uniques.find(
+      (item) => item.element === node.element && item.name === node.name,
+    );
+    if (!isElementExist) {
+      uniques.push(node);
+    }
+  });
+
+  return uniques;
+};
+
+export const traverseDom = (
+  node: HTMLElement | null,
+  activeTraceItems: string[],
+): SelectableElement[] => {
+  if (!node) {
+    return [];
+  }
+
+  const items: SelectableElement[] = [];
+
+  const fiber = getFiberFromElement(node);
+  const targetFiber = selectFiber(fiber, activeTraceItems);
+
+  if (targetFiber.nameFiber) {
+    const [element] = getFirstHTMLElementFromFiber(targetFiber.nameFiber);
+    const name = getNameFromFiber(targetFiber.nameFiber);
+    if (element && name) {
+      items.push({
+        element,
+        name,
+      });
+    }
+  }
+
+  for (let i = 0; i < node?.children?.length ?? 0; i++) {
+    items.push(
+      ...traverseDom(node.children[i] as HTMLElement, activeTraceItems),
+    );
+  }
+
+  return items;
+};

packages/devtools/src/utilities/use-selector.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { DevToolsContext } from "@refinedev/devtools-shared";
+
+import {
+  filterInvisibleNodes,
+  getUniqueNodes,
+  traverseDom,
+  type SelectableElement,
+} from "./selector-helpers";
+
+export const useSelector = (active: boolean) => {
+  const { httpUrl } = React.useContext(DevToolsContext);
+  const [selectableElements, setSelectableElements] = React.useState<
+    SelectableElement[]
+  >([]);
+
+  const fetchTraceItems = React.useCallback(async () => {
+    const response = await fetch(`${httpUrl}/api/unique-trace-items`);
+    const data = await response.json();
+
+    return data.data as string[];
+  }, [httpUrl]);
+
+  const prepareSelector = React.useCallback(async () => {
+    const fetchedTraceItems = await fetchTraceItems();
+    const traversedNodes = traverseDom(document.body, fetchedTraceItems);
+    const filterInvisible = filterInvisibleNodes(traversedNodes);
+    const uniqueNodes = getUniqueNodes(filterInvisible);
+
+    setSelectableElements(uniqueNodes);
+  }, [fetchTraceItems]);
+
+  React.useEffect(() => {
+    if (active) {
+      prepareSelector();
+    }
+  }, [active, prepareSelector]);
+
+  return {
+    selectableElements,
+  };
+};