@refinedev/devtools 1.0.0

package/src/components/selector-box.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+export const SelectorBox = ({
+    width,
+    height,
+    x,
+    y,
+    name,
+}: {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    name: string;
+}) => {
+    const namePosition = y - 6 > 25 ? "top" : "bottom";
+
+    const outlinePosition = x > 7 ? "outside" : "inside";
+
+    return (
+        <div
+            id="selector-box"
+            style={{
+                pointerEvents: "none",
+                position: "fixed",
+                opacity: name ? 1 : 0,
+                transition: "all 0.2s ease-in-out",
+                border: "1.5px solid #47EBEB",
+                borderRadius: "4px",
+                borderTopLeftRadius: 0,
+                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: "#1D1E30",
+                    padding: "4px 6px",
+                    border: "1.5px solid #47EBEB",
+                    fontSize: "13px",
+                    lineHeight: "16px",
+                    fontWeight: 600,
+                    color: "#CFD7E2",
+                    display: name ? "block" : "none",
+                    ...(namePosition === "top"
+                        ? {
+                              top: "-27px",
+                              borderTopLeftRadius: "4px",
+                              borderTopRightRadius: "4px",
+                          }
+                        : {
+                              top: "-1.5px",
+                              borderBottomLeftRadius: "0",
+                              borderBottomRightRadius: "4px",
+                          }),
+                }}
+            >
+                {name}
+            </div>
+        </div>
+    );
+};

package/src/components/selector-hint.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+export const SelectorHint = ({
+    active,
+    groupHover,
+}: {
+    active: boolean;
+    groupHover?: boolean;
+}) => {
+    return (
+        <div
+            style={{
+                pointerEvents: "none",
+                position: "absolute",
+                left: "calc(-50% - 100px - 14px)",
+                top: "-50px",
+                width: "200px",
+                opacity: active ? 1 : 0,
+                transform: groupHover ? "translateX(0)" : "translateX(40px)",
+                transitionDuration: "0.2s",
+                transitionProperty: "transform,opacity",
+                transitionTimingFunction: "ease-in-out",
+                padding: "8px",
+                fontSize: "10px",
+                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: "1px 2px",
+                    borderRadius: "2px",
+                    background: "whitesmoke",
+                    color: "dimgray",
+                    border: "0.5px solid silver",
+                    boxShadow: "0 1px 1px silver",
+                    textShadow: "none",
+                }}
+            >
+                shift
+            </kbd>{" "}
+            to move to parent.
+            <kbd
+                style={{
+                    marginLeft: "4px",
+                    padding: "1px 2px",
+                    borderRadius: "2px",
+                    background: "whitesmoke",
+                    color: "dimgray",
+                    border: "0.5px solid silver",
+                    boxShadow: "0 1px 1px silver",
+                    textShadow: "none",
+                }}
+            >
+                space
+            </kbd>{" "}
+            to highlight in monitor.
+        </div>
+    );
+};

package/src/define.d.ts

@@ -0,0 +1 @@
+declare const __DEV_CONDITION__: string;

package/src/index.ts

@@ -0,0 +1,2 @@
+export { DevtoolsPanel } from "./panel";
+export { DevtoolsProvider } from "./provider";

package/src/interfaces/placement.ts

@@ -0,0 +1 @@
+export type Placement = "bottom" | "left" | "right" | "top";

package/src/panel.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { DevtoolsPin } from "./components/devtools-pin";
+import { ResizablePane } from "./components/resizable-pane";
+
+import { SIZE, getPinTransform } from "./utilities";
+
+import { Placement } from "./interfaces/placement";
+import {
+    DevToolsContext,
+    DevtoolsEvent,
+    send,
+} from "@refinedev/devtools-shared";
+
+export const DevtoolsPanel =
+    __DEV_CONDITION__ !== "development"
+        ? () => null
+        : () => {
+              const [visible, setVisible] = React.useState(false);
+              const [placement] = React.useState<Placement>("bottom");
+              const { devtoolsUrl, ws } = React.useContext(DevToolsContext);
+              const [hover, setHover] = React.useState(false);
+
+              const onSelectorHighlight = React.useCallback(
+                  (name: string) => {
+                      if (ws) {
+                          send(
+                              ws,
+                              DevtoolsEvent.DEVTOOLS_HIGHLIGHT_IN_MONITOR,
+                              {
+                                  name,
+                              },
+                          );
+                      }
+                      setVisible(true);
+                  },
+                  [ws],
+              );
+
+              const onSelectorOpen = React.useCallback(() => {
+                  setVisible(false);
+              }, []);
+
+              return (
+                  <div
+                      style={{
+                          position: "fixed",
+                          left: 0,
+                          top: 0,
+                          zIndex: 99999,
+                          width: `${SIZE * 2}px`,
+                          height: `${SIZE}px`,
+
+                          transform: getPinTransform(placement),
+                      }}
+                      onMouseEnter={() => setHover(true)}
+                      onMouseLeave={() => setHover(false)}
+                  >
+                      <DevtoolsPin
+                          active={visible}
+                          onClick={() => setVisible((v) => !v)}
+                          groupHover={hover}
+                          onSelectorHighlight={onSelectorHighlight}
+                          onSelectorOpen={onSelectorOpen}
+                      />
+                      <ResizablePane visible={visible} placement={placement}>
+                          {({ resizing }) => (
+                              <iframe
+                                  src={devtoolsUrl}
+                                  srcDoc={
+                                      devtoolsUrl
+                                          ? undefined
+                                          : `
+                            <html style="height:100%;padding:0;margin:0;">
+                                <body style="display:flex;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;">
+                                    <h1 style="font-family:ui-monospace,monospace;color:#CFD7E2;text-align:center;">Could not connect to the devtools server</h1>
+                                </body>
+                            </html>
+                        `
+                                  }
+                                  style={{
+                                      width: "100%",
+                                      height: "100%",
+                                      border: "none",
+                                      borderRadius: "7px",
+                                      pointerEvents: resizing ? "none" : "auto",
+                                      background: "#14141F",
+                                  }}
+                              />
+                          )}
+                      </ResizablePane>
+                  </div>
+              );
+          };

package/src/provider.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { DevToolsContextProvider } from "@refinedev/devtools-shared";
+
+export const DevtoolsProvider =
+    __DEV_CONDITION__ !== "development"
+        ? ({ children }: React.PropsWithChildren) => children as any
+        : ({ children }: React.PropsWithChildren) => {
+              return (
+                  <DevToolsContextProvider>{children}</DevToolsContextProvider>
+              );
+          };

package/src/utilities/index.ts

@@ -0,0 +1,142 @@
+import { 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;
+
+const verticalCenterTransform = `translateY(calc((100vh - ${SIZE}px) / 2))`;
+const horizontalCenterTransform = `translateX(calc((100vw - ${
+    SIZE * 2
+}px) / 2))`;
+const rightAlignTransform = `translateX(calc((100vw - ${SIZE}px) - ${BUFFER}px))`;
+const leftAlignTransform = `translateX(${BUFFER}px)`;
+const topAlignTransform = `translateY(${BUFFER}px)`;
+const bottomAlignTransform = `translateY(calc((100vh - ${SIZE}px) - ${0}px))`;
+
+export const getPinTransform = (placement: Placement) => {
+    switch (placement) {
+        case "left":
+            return `${leftAlignTransform} ${verticalCenterTransform}`;
+        case "right":
+            return `${rightAlignTransform} ${verticalCenterTransform}`;
+        case "top":
+            return `${topAlignTransform} ${horizontalCenterTransform}`;
+        default:
+        case "bottom":
+            return `${bottomAlignTransform} ${horizontalCenterTransform}`;
+    }
+};
+
+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%)",
+            };
+        default:
+        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,
+    };
+};

package/src/utilities/use-selector.tsx

@@ -0,0 +1,242 @@
+import React from "react";
+import debounce from "lodash/debounce";
+import {
+    getElementFromFiber,
+    getFiberFromElement,
+    getFirstFiberHasName,
+    getFirstStateNodeFiber,
+    getNameFromFiber,
+    getParentOfFiber,
+} from "@aliemir/dom-to-fiber-utils";
+
+type Fiber = Exclude<ReturnType<typeof getFiberFromElement>, null>;
+
+export const useSelector = (active: boolean) => {
+    const [traceItems, setTraceItems] = React.useState<string[]>([]);
+
+    React.useEffect(() => {
+        if (active) {
+            fetch("http://localhost:5001/api/unique-trace-items").then((res) =>
+                res
+                    .json()
+                    .then((data: { data: string[] }) =>
+                        setTraceItems(data.data),
+                    ),
+            );
+        }
+    }, [active]);
+
+    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,
+    });
+
+    React.useEffect(() => {
+        if (active) {
+            return () => {
+                setSelectedFiber({
+                    stateNode: null,
+                    nameFiber: null,
+                });
+                setActiveFiber({
+                    stateNode: null,
+                    nameFiber: null,
+                    derived: false,
+                });
+            };
+        }
+
+        return () => 0;
+    }, [active]);
+
+    const selectAppropriateFiber = React.useCallback(
+        (start: Fiber | null) => {
+            let fiber = start;
+            let firstParentOfNodeWithName: Fiber | null;
+            let fiberWithStateNode: Fiber | 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 = traceItems.includes(
+                    getNameFromFiber(firstParentOfNodeWithName) ?? "",
+                );
+                if (!acceptedName) {
+                    fiber = getParentOfFiber(fiber);
+                }
+            }
+
+            if (fiberWithStateNode && firstParentOfNodeWithName) {
+                return {
+                    stateNode: fiberWithStateNode,
+                    nameFiber: firstParentOfNodeWithName,
+                };
+            } else {
+                return {
+                    stateNode: null,
+                    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 { rect, name } = React.useMemo(() => {
+        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,
+                };
+            }
+
+            const bounding = element.getBoundingClientRect?.();
+
+            if (!bounding) {
+                return {
+                    rect: previousValues.current.rect,
+                    name: fiberName ?? previousValues.current.name,
+                };
+            }
+
+            return {
+                rect: {
+                    width: bounding.width,
+                    height: bounding.height,
+                    x: bounding.left,
+                    y: bounding.top,
+                },
+                name: fiberName ?? previousValues.current.name,
+            };
+        }
+
+        return previousValues.current;
+    }, [activeFiber]);
+
+    previousValues.current = {
+        rect,
+        name,
+    };
+
+    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;
+                    }
+                }
+            };
+
+            document.addEventListener("keydown", listener);
+            return () => document.removeEventListener("keydown", listener);
+        }
+        return () => 0;
+    }, [activeFiber, active]);
+
+    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;
+                }
+            }, 30);
+
+            document.addEventListener("mousemove", listener);
+
+            return () => document.removeEventListener("mousemove", listener);
+        } else {
+            return () => 0;
+        }
+    }, [active, pickFiber]);
+
+    return {
+        rect,
+        name,
+    };
+};