@tanstack/react-query-devtools 5.0.0-alpha.47 → 5.0.0-alpha.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.0.0-alpha.47",
+  "version": "5.0.0-alpha.49",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -13,7 +13,7 @@
   "type": "commonjs",
   "types": "build/lib/index.d.ts",
   "main": "build/lib/index.js",
-  "module": "build/lib/index.esm.js",
+  "module": "build/lib/index.mjs",
   "exports": {
     ".": {
       "types": "./build/lib/index.d.ts",

package/build/lib/devtools.esm.js

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

package/build/lib/devtools.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtools.esm.js","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/index.esm.js

@@ -1,16 +0,0 @@
-'use client';
-import { ReactQueryDevtools as ReactQueryDevtools$1 } from './devtools.esm.js';
-
-const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? function () {
-  return null;
-} : ReactQueryDevtools$1;
-
-// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
-//   process.env.NODE_ENV !== 'development'
-//     ? (function () {
-//         return null
-//       } as any)
-//     : devtools.ReactQueryDevtoolsPanel
-
-export { ReactQueryDevtools };
-//# sourceMappingURL=index.esm.js.map

package/build/lib/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n\n// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =\n//   process.env.NODE_ENV !== 'development'\n//     ? (function () {\n//         return null\n//       } as any)\n//     : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":";;;AAIO;AAGC;AACF;;AAGN;AACA;AACA;AACA;AACA;AACA;;"}