@tanstack/react-query-devtools 5.0.0-alpha.5 → 5.0.0-alpha.51

package/build/lib/__tests__/devtools.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+//# sourceMappingURL=devtools.test.d.ts.map

package/build/lib/__tests__/devtools.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.test.d.ts","sourceRoot":"","sources":["../../../src/__tests__/devtools.test.tsx"],"names":[],"mappings":""}

package/build/lib/__tests__/utils.d.ts

@@ -12,7 +12,7 @@ export declare function sleep(timeout: number): Promise<void>;
  * @param textToMatch The string that needs to be matched
  * @reference https://stackoverflow.com/a/56859650/8252081
  */
-declare type MatcherFunction = (content: string, element: Element | null) => boolean;
+type MatcherFunction = (content: string, element: Element | null) => boolean;
 export declare const getByTextContent: (textToMatch: string) => MatcherFunction;
 interface CreateQueryClientResponse {
     queryClient: QueryClient;
@@ -20,3 +20,4 @@ interface CreateQueryClientResponse {
 }
 export declare const createQueryClient: () => CreateQueryClientResponse;
 export {};
+//# sourceMappingURL=utils.d.ts.map

package/build/lib/__tests__/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/__tests__/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAA;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,EACL,WAAW,EAEX,UAAU,EACX,MAAM,uBAAuB,CAAA;AAE9B,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,eAAe,GAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAM,EACnE,aAAa,CAAC,EAAE,aAAa,GAC5B,UAAU,CAAC,OAAO,MAAM,CAAC,CAkB3B;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAIpD;AAED;;;;;;;GAOG;AAEH,KAAK,eAAe,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,OAAO,CAAA;AAE5E,eAAO,MAAM,gBAAgB,gBACb,MAAM,KAAG,eAatB,CAAA;AAEH,UAAU,yBAAyB;IACjC,WAAW,EAAE,WAAW,CAAA;IACxB,UAAU,EAAE,UAAU,CAAA;CACvB;AAED,eAAO,MAAM,iBAAiB,QAAO,yBAWpC,CAAA"}

package/build/lib/devtools.cjs

@@ -0,0 +1,61 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var reactQuery = require('@tanstack/react-query');
+var queryDevtools = require('@tanstack/query-devtools');
+
+function ReactQueryDevtools(props) {
+  const queryClient = reactQuery.useQueryClient();
+  const client = props.client || queryClient;
+  const ref = React.useRef(null);
+  const {
+    buttonPosition,
+    position,
+    initialIsOpen,
+    errorTypes
+  } = props;
+  const [devtools] = React.useState(new queryDevtools.TanstackQueryDevtools({
+    client: client,
+    queryFlavor: 'React Query',
+    version: '5',
+    onlineManager: reactQuery.onlineManager,
+    buttonPosition,
+    position,
+    initialIsOpen,
+    errorTypes
+  }));
+  React.useEffect(() => {
+    devtools.setClient(client);
+  }, [client, devtools]);
+  React.useEffect(() => {
+    if (buttonPosition) {
+      devtools.setButtonPosition(buttonPosition);
+    }
+  }, [buttonPosition, devtools]);
+  React.useEffect(() => {
+    if (position) {
+      devtools.setPosition(position);
+    }
+  }, [position, devtools]);
+  React.useEffect(() => {
+    devtools.setInitialIsOpen(initialIsOpen || false);
+  }, [initialIsOpen, devtools]);
+  React.useEffect(() => {
+    devtools.setErrorTypes(errorTypes || []);
+  }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current);
+    }
+    return () => {
+      devtools.unmount();
+    };
+  }, [devtools]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  });
+}
+
+exports.ReactQueryDevtools = ReactQueryDevtools;
+//# sourceMappingURL=devtools.cjs.map

package/build/lib/devtools.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.cjs","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n  DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: DevToolsErrorType[]\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes } = props\n  const [devtools] = useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n    }),\n  )\n\n  useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div ref={ref}></div>\n}\n"],"names":["errorTypes","client","queryFlavor","version","useEffect","devtools","ref"],"mappings":";;;;;;;AAuCO;AAGL;AACA;AACA;;;;;AACiDA;AAAW;;AAGxDC;AACAC;AACAC;;;;;AAKAH;AACF;AAGFI;AACEC;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACEC;AACF;AAEAD;AACEC;AACF;AAEAD;;AAEIC;AACF;AAEA;;;AAGF;;AAEYC;AAAS;AACvB;;"}

package/build/lib/devtools.d.ts

@@ -1,95 +1,31 @@
-import * as React from 'react';
 import type { QueryClient } from '@tanstack/react-query';
-import type { Corner, Side } from './utils';
+import type { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType } from '@tanstack/query-devtools';
+import React from 'react';
 export interface DevtoolsOptions {
     /**
      * Set this true if you want the dev tools to default to being open
      */
     initialIsOpen?: boolean;
-    /**
-     * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
-     */
-    panelProps?: React.ComponentPropsWithoutRef<'div'>;
-    /**
-     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-     */
-    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /**
-     * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-     */
-    toggleButtonProps?: React.ComponentPropsWithoutRef<'button'>;
     /**
      * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
      * Defaults to 'bottom-left'.
      */
-    position?: Corner;
+    buttonPosition?: DevtoolsButtonPosition;
     /**
      * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
      * Defaults to 'bottom'.
      */
-    panelPosition?: Side;
-    /**
-     * Use this to render the devtools inside a different type of container element for a11y purposes.
-     * Any string which corresponds to a valid intrinsic JSX element is allowed.
-     * Defaults to 'aside'.
-     */
-    containerElement?: string | any;
-    /**
-     * nonce for style element for CSP
-     */
-    styleNonce?: string;
+    position?: DevtoolsPosition;
     /**
      * Custom instance of QueryClient
      */
-    queryClient?: QueryClient;
-}
-interface DevtoolsPanelOptions {
-    /**
-     * The standard React style object used to style a component with inline styles
-     */
-    style?: React.CSSProperties;
-    /**
-     * The standard React className property used to style a component with classes
-     */
-    className?: string;
-    /**
-     * A boolean variable indicating whether the panel is open or closed
-     */
-    isOpen?: boolean;
+    client?: QueryClient;
     /**
-     * nonce for style element for CSP
-     */
-    styleNonce?: string;
-    /**
-     * A function that toggles the open and close state of the panel
-     */
-    setIsOpen: (isOpen: boolean) => void;
-    /**
-     * Handles the opening and closing the devtools panel
-     */
-    onDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    /**
-     * The position of the React Query devtools panel.
-     * Defaults to 'bottom'.
-     */
-    position?: Side;
-    /**
-     * Handles the panel position select change
-     */
-    onPositionChange?: (side: Side) => void;
-    /**
-     * Show a close button inside the panel
-     */
-    showCloseButton?: boolean;
-    /**
-     * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.
-     */
-    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
-    /**
-     * Custom instance of QueryClient
+     * Use this so you can define custom errors that can be shown in the devtools.
      */
-    queryClient?: QueryClient;
+    errorTypes?: DevToolsErrorType[];
 }
-export declare function ReactQueryDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, queryClient, styleNonce, panelPosition: initialPanelPosition, }: DevtoolsOptions): React.ReactElement | null;
-export declare const ReactQueryDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
-export {};
+export declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
+//# sourceMappingURL=devtools.d.ts.map

package/build/lib/devtools.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../src/devtools.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,0BAA0B,CAAA;AAEjC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAA;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAA;CACjC;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,eAAe,GACrB,KAAK,CAAC,YAAY,GAAG,IAAI,CAqD3B"}