@refinedev/devtools 1.2.6 → 1.2.8

package/dist/utilities/selector-helpers.d.cts

@@ -0,0 +1,8 @@
+export type SelectableElement = {
+    element: HTMLElement;
+    name: string;
+};
+export declare const filterInvisibleNodes: (nodes: SelectableElement[]) => SelectableElement[];
+export declare const getUniqueNodes: (nodes: SelectableElement[]) => SelectableElement[];
+export declare const traverseDom: (node: HTMLElement | null, activeTraceItems: string[]) => SelectableElement[];
+//# sourceMappingURL=selector-helpers.d.ts.map

package/dist/utilities/selector-helpers.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-helpers.d.ts","sourceRoot":"","sources":["../../src/utilities/selector-helpers.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AA0FF,eAAO,MAAM,oBAAoB,UAAW,iBAAiB,EAAE,wBAI9D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,iBAAiB,EAAE,wBAaxD,CAAC;AAEF,eAAO,MAAM,WAAW,SAChB,WAAW,GAAG,IAAI,oBACN,MAAM,EAAE,KACzB,iBAAiB,EA4BnB,CAAC"}

package/dist/utilities/selector-helpers.d.mts

@@ -0,0 +1,8 @@
+export type SelectableElement = {
+    element: HTMLElement;
+    name: string;
+};
+export declare const filterInvisibleNodes: (nodes: SelectableElement[]) => SelectableElement[];
+export declare const getUniqueNodes: (nodes: SelectableElement[]) => SelectableElement[];
+export declare const traverseDom: (node: HTMLElement | null, activeTraceItems: string[]) => SelectableElement[];
+//# sourceMappingURL=selector-helpers.d.ts.map

package/dist/utilities/selector-helpers.d.mts.map

@@ -0,0 +1,8 @@
+export type SelectableElement = {
+    element: HTMLElement;
+    name: string;
+};
+export declare const filterInvisibleNodes: (nodes: SelectableElement[]) => SelectableElement[];
+export declare const getUniqueNodes: (nodes: SelectableElement[]) => SelectableElement[];
+export declare const traverseDom: (node: HTMLElement | null, activeTraceItems: string[]) => SelectableElement[];
+//# sourceMappingURL=selector-helpers.d.ts.map

package/dist/utilities/selector-helpers.d.ts

@@ -0,0 +1,8 @@
+export type SelectableElement = {
+    element: HTMLElement;
+    name: string;
+};
+export declare const filterInvisibleNodes: (nodes: SelectableElement[]) => SelectableElement[];
+export declare const getUniqueNodes: (nodes: SelectableElement[]) => SelectableElement[];
+export declare const traverseDom: (node: HTMLElement | null, activeTraceItems: string[]) => SelectableElement[];
+//# sourceMappingURL=selector-helpers.d.ts.map

package/dist/utilities/selector-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-helpers.d.ts","sourceRoot":"","sources":["../../src/utilities/selector-helpers.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AA0FF,eAAO,MAAM,oBAAoB,UAAW,iBAAiB,EAAE,wBAI9D,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,iBAAiB,EAAE,wBAaxD,CAAC;AAEF,eAAO,MAAM,WAAW,SAChB,WAAW,GAAG,IAAI,oBACN,MAAM,EAAE,KACzB,iBAAiB,EA4BnB,CAAC"}

package/dist/utilities/use-selector.d.cts

@@ -1,9 +1,5 @@
-type SelectableElement = {
-    element: HTMLElement;
-    name: string;
-};
+import { type SelectableElement } from "./selector-helpers";
 export declare const useSelector: (active: boolean) => {
     selectableElements: SelectableElement[];
 };
-export {};
 //# sourceMappingURL=use-selector.d.ts.map

package/dist/utilities/use-selector.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-selector.d.ts","sourceRoot":"","sources":["../../src/utilities/use-selector.tsx"],"names":[],"mappings":"AAaA,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,WAAW,WAAY,OAAO;;CAuH1C,CAAC"}
+{"version":3,"file":"use-selector.d.ts","sourceRoot":"","sources":["../../src/utilities/use-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW,WAAY,OAAO;;CA+B1C,CAAC"}

package/dist/utilities/use-selector.d.mts

@@ -1,9 +1,5 @@
-type SelectableElement = {
-    element: HTMLElement;
-    name: string;
-};
+import { type SelectableElement } from "./selector-helpers";
 export declare const useSelector: (active: boolean) => {
     selectableElements: SelectableElement[];
 };
-export {};
 //# sourceMappingURL=use-selector.d.ts.map

package/dist/utilities/use-selector.d.mts.map

@@ -1,9 +1,5 @@
-type SelectableElement = {
-    element: HTMLElement;
-    name: string;
-};
+import { type SelectableElement } from "./selector-helpers";
 export declare const useSelector: (active: boolean) => {
     selectableElements: SelectableElement[];
 };
-export {};
 //# sourceMappingURL=use-selector.d.ts.map

package/dist/utilities/use-selector.d.ts

@@ -1,9 +1,5 @@
-type SelectableElement = {
-    element: HTMLElement;
-    name: string;
-};
+import { type SelectableElement } from "./selector-helpers";
 export declare const useSelector: (active: boolean) => {
     selectableElements: SelectableElement[];
 };
-export {};
 //# sourceMappingURL=use-selector.d.ts.map

package/dist/utilities/use-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-selector.d.ts","sourceRoot":"","sources":["../../src/utilities/use-selector.tsx"],"names":[],"mappings":"AAaA,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,WAAW,WAAY,OAAO;;CAuH1C,CAAC"}
+{"version":3,"file":"use-selector.d.ts","sourceRoot":"","sources":["../../src/utilities/use-selector.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,WAAW,WAAY,OAAO;;CA+B1C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/devtools",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "private": false,
   "description": "refine devtools offers a set of features from monitoring to quickly prototyping a UI.",
   "repository": {
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@aliemir/dom-to-fiber-utils": "^0.4.0",
-    "@refinedev/devtools-shared": "1.1.11",
+    "@refinedev/devtools-shared": "1.1.12",
     "error-stack-parser": "^2.1.4",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21"
@@ -43,6 +43,7 @@
     "@types/jest": "^29.2.4",
     "@types/lodash": "^4.14.171",
     "@types/node": "^18.16.2",
+    "@types/react-reconciler": "^0.28.8",
     "@types/testing-library__jest-dom": "^5.14.3",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
@@ -53,9 +54,9 @@
     "typescript": "^5.4.2"
   },
   "peerDependencies": {
-    "@refinedev/cli": "2.16.36",
+    "@refinedev/cli": "2.16.38",
     "@refinedev/core": "^4.46.1",
-    "@refinedev/devtools-server": "1.1.34",
+    "@refinedev/devtools-server": "1.1.36",
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",

package/src/components/devtools-selector.tsx

@@ -53,6 +53,7 @@ export const DevtoolsSelector = ({
           width: 100%;
           transform: rotate(0deg);
           transition: transform 0.2s ease-in-out;
+          line-height: 1;
         }
 
         .refine-devtools-selector-button:hover {

package/src/components/selectable-elements.tsx

@@ -4,6 +4,22 @@ import { createPortal } from "react-dom";
 import { ApplyStyles } from "./apply-styles";
 import { SelectorIcon } from "./icons/selector-button";
 
+const MIN_SIZE = 22;
+
+const getPosition = (element: HTMLElement, document: Document) => {
+  const { top, left, width, height } = element.getBoundingClientRect();
+  const { scrollLeft, scrollTop } = document.documentElement;
+  const positionLeft = left + scrollLeft - Math.max(0, MIN_SIZE - width) / 2;
+  const positionTop = top + scrollTop - Math.max(0, MIN_SIZE - height) / 2;
+
+  return {
+    left: positionLeft,
+    top: positionTop,
+    width: Math.max(MIN_SIZE, width),
+    height: Math.max(MIN_SIZE, height),
+  };
+};
+
 const SelectableElement = ({
   element,
   name,
@@ -13,14 +29,7 @@ const SelectableElement = ({
   name: string;
   onSelect: (name: string) => void;
 }) => {
-  const [position] = React.useState(() => {
-    const { top, left, width, height } = element.getBoundingClientRect();
-    const { scrollLeft, scrollTop } = document.documentElement;
-    const positionLeft = left + scrollLeft;
-    const positionTop = top + scrollTop;
-
-    return { left: positionLeft, top: positionTop, width, height };
-  });
+  const [position] = React.useState(() => getPosition(element, document));
 
   const elementRef = React.useRef<HTMLButtonElement | null>(null);
 
@@ -28,15 +37,10 @@ const SelectableElement = ({
     // use scroll event listener
     const onScroll = debounce(
       () => {
-        const { top, left, width, height } = element.getBoundingClientRect();
-        const { scrollLeft, scrollTop } = document.documentElement;
-        const positionLeft = left + scrollLeft;
-        const positionTop = top + scrollTop;
-
-        elementRef.current?.style.setProperty("left", `${positionLeft}px`);
-        elementRef.current?.style.setProperty("top", `${positionTop}px`);
-        elementRef.current?.style.setProperty("width", `${width}px`);
-        elementRef.current?.style.setProperty("height", `${height}px`);
+        const nextPos = getPosition(element, document);
+        (["left", "top", "width", "height"] as const).forEach((prop) => {
+          elementRef.current?.style.setProperty(prop, `${nextPos[prop]}px`);
+        });
         elementRef.current?.style.setProperty("opacity", "1");
       },
       200,
@@ -247,6 +251,9 @@ export const SelectableElements = ({
             max-width: 200px;
             padding-right: 8px;
           }
+          .selector-xray-box:hover .selector-xray-info-title {
+            z-index: 90;
+          }
         `
         }
       </ApplyStyles>

package/src/define.d.ts

@@ -1 +1,9 @@
 declare const __DEV_CONDITION__: string;
+declare const __IMPORT_META_KEY__: any;
+declare const __PROCESS_KEY__: any;
+
+declare const __PROCESS_ENV_REFINE_DEVTOOLS_PORT_KEY__: any;
+declare const __PROCESS_ENV_NEXT_PUBLIC_REFINE_DEVTOOLS_PORT_KEY__: any;
+declare const __PROCESS_ENV_REACT_APP_REFINE_DEVTOOLS_PORT_KEY__: any;
+declare const __IMPORT_META_ENV_REFINE_DEVTOOLS_PORT_KEY__: any;
+declare const __IMPORT_META_ENV_VITE_REFINE_DEVTOOLS_PORT_KEY__: any;

package/src/panel.tsx

@@ -10,6 +10,8 @@ import {
 
 import type { Placement } from "./interfaces/placement";
 
+const MAX_IFRAME_WAIT_TIME = 1500;
+
 export const DevtoolsPanel =
   __DEV_CONDITION__ !== "development"
     ? () => null
@@ -17,9 +19,12 @@ export const DevtoolsPanel =
         const [browser, setBrowser] = React.useState<boolean>(false);
         const [visible, setVisible] = React.useState(false);
         const [placement] = React.useState<Placement>("bottom");
-        const { devtoolsUrl, ws } = React.useContext(DevToolsContext);
+        const { httpUrl, ws } = React.useContext(DevToolsContext);
         const [width, setWidth] = React.useState<number>(0);
         const [selectorActive, setSelectorActive] = React.useState(false);
+        const [iframeStatus, setIframeStatus] = React.useState<
+          "loading" | "loaded" | "failed"
+        >("loading");
 
         const onSelectorHighlight = React.useCallback(
           (name: string) => {
@@ -33,10 +38,6 @@ export const DevtoolsPanel =
           [ws],
         );
 
-        const onSelectorOpen = React.useCallback(() => {
-          setVisible(false);
-        }, []);
-
         React.useEffect(() => {
           if (selectorActive) {
             setVisible(false);
@@ -68,6 +69,41 @@ export const DevtoolsPanel =
           return () => undefined;
         }, [browser]);
 
+        React.useEffect(() => {
+          if (iframeStatus !== "loaded") {
+            const onMessage = (event: MessageEvent) => {
+              if (event.data.type === "refine-devtools-iframe-loaded") {
+                setIframeStatus("loaded");
+              }
+            };
+
+            window.addEventListener("message", onMessage);
+
+            return () => {
+              window.removeEventListener("message", onMessage);
+            };
+          }
+
+          return () => 0;
+        }, []);
+
+        React.useEffect(() => {
+          let timeout: number;
+          if (iframeStatus === "loading") {
+            timeout = window.setTimeout(() => {
+              setIframeStatus("failed");
+              if (timeout) {
+                clearInterval(timeout);
+              }
+            }, MAX_IFRAME_WAIT_TIME);
+          }
+          return () => {
+            if (typeof timeout !== "undefined") {
+              clearInterval(timeout);
+            }
+          };
+        }, [iframeStatus]);
+
         if (!browser) {
           return null;
         }
@@ -95,17 +131,13 @@ export const DevtoolsPanel =
               {({ resizing }) => (
                 <iframe
                   allow="clipboard-write;"
-                  src={devtoolsUrl}
+                  src={httpUrl}
                   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>
-                        `
+                    httpUrl
+                      ? iframeStatus === "failed"
+                        ? failedConnectionContent
+                        : undefined
+                      : missingUrlContent
                   }
                   style={{
                     width: "100%",
@@ -121,3 +153,20 @@ export const DevtoolsPanel =
           </div>
         );
       };
+
+const missingUrlContent = `
+      <html style="height:100%;padding:0;margin:0;background:#14141F;">
+        <body style="background:#14141F;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;font-weight:400;color:#CFD7E2;text-align:center;font-size:24px;">Could not connect to the devtools server.</h1>
+        </body>
+      </html>
+      `;
+
+const failedConnectionContent = `
+      <html style="height:100%;padding:0;margin:0;background:#14141F;">
+        <body style="background:#14141F;display:flex;flex-direction:column;justify-content:center;height:100%;padding:24px;margin:0;align-items:center;box-sizing:border-box;">
+          <h1 style="max-width:480px;min-width:480px;font-family:ui-monospace,monospace;font-weight:400;color:#CFD7E2;text-align:left;font-size:24px;margin-bottom:12px;line-height:24px;">Devtools Server is unreachable.</h1>
+          <p style="max-width:480px;font-family:ui-monospace,monospace;font-weight:400;color:#6C7793;text-align:left;font-size:16px;line-height:32px;">Please make sure Refine Devtools is running and <code style="background:#303450;color:#A3ADC2;padding:3px 6px;border-radius:4px;">&lt;DevtoolsProvider /&gt;</code> has valid <code style="background:#303450;color:#A3ADC2;padding:3px 6px;border-radius:4px;">url</code> prop. Environment variables may not always be available in browser depending on your project setup.</p>
+        </body>
+      </html>
+      `;

package/src/provider.tsx

@@ -1,9 +1,24 @@
 import React from "react";
 import { DevToolsContextProvider } from "@refinedev/devtools-shared";
+import { getDevtoolsUrlFromEnv } from "./utilities/get-devtools-url-from-env";
+
+type Props = React.PropsWithChildren<{
+  /**
+   * Devtools URL to connect to the server. This will also be used for the WebSocket connections and serving the Devtools UI.
+   * By default, it will use the `REFINE_DEVTOOLS_PORT` environment variable to construct to URL or use `5001` as the default port.
+   * If you're using `refine dev` command, it will try to automatically set the environment variable for you and use it.
+   * If environment variable is not working for you, you can manually set the URL as a string or a tuple of `[httpUrl: string, wsUrl: string]`.
+   */
+  url?: string | [httpUrl: string, wsUrl: string];
+}>;
 
 export const DevtoolsProvider =
   __DEV_CONDITION__ !== "development"
-    ? ({ children }: React.PropsWithChildren) => children as any
-    : ({ children }: React.PropsWithChildren) => {
-        return <DevToolsContextProvider>{children}</DevToolsContextProvider>;
+    ? ({ children }: Props) => children as any
+    : ({ children, url = getDevtoolsUrlFromEnv() }: Props) => {
+        return (
+          <DevToolsContextProvider url={url}>
+            {children}
+          </DevToolsContextProvider>
+        );
       };

package/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,
+  ];
+};

package/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;
+};