@tanstack/react-query-devtools - npm Package Compare versions

Comparing version 5.0.0-alpha.50 to 5.0.0-alpha.51

build/lib/devtools.cjs

+'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

build/lib/devtools.cjs.map

+{"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;;"}

build/lib/index.cjs

+'use client';
+'use strict';
+
+var devtools = require('./devtools.cjs');
+
+const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? function () {
+  return null;
+} : devtools.ReactQueryDevtools;
+
+// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
+//   process.env.NODE_ENV !== 'development'
+//     ? (function () {
+//         return null
+//       } as any)
+//     : devtools.ReactQueryDevtoolsPanel
+
+exports.ReactQueryDevtools = ReactQueryDevtools;
+//# sourceMappingURL=index.cjs.map

build/lib/index.cjs.map

+{"version":3,"file":"index.cjs","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;;"}

build/lib/index.prod.cjs

+'use strict';
+
+var React = require('react');
+var reactQuery = require('@tanstack/react-query');
+var queryDevtools = require('@tanstack/query-devtools');
+
+function ReactQueryDevtools$1(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
+  });
+}
+
+const ReactQueryDevtools = ReactQueryDevtools$1;
+
+// export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
+//   "development" !== 'development'
+//     ? (function () {
+//         return null
+//       } as any)
+//     : devtools.ReactQueryDevtoolsPanel
+
+exports.ReactQueryDevtools = ReactQueryDevtools;
+//# sourceMappingURL=index.prod.cjs.map

build/lib/index.prod.cjs.map

+{"version":3,"file":"index.prod.cjs","sources":["../../src/devtools.tsx","../../src/index.ts"],"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","'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":["ReactQueryDevtools","props","queryClient","useQueryClient","client","ref","useRef","buttonPosition","position","initialIsOpen","errorTypes","devtools","useState","TanstackQueryDevtools","queryFlavor","version","onlineManager","useEffect","setClient","setButtonPosition","setPosition","setInitialIsOpen","setErrorTypes","current","mount","unmount","React","createElement"],"mappings":";;;;;;AAuCO,SAASA,oBAAkBA,CAChCC,KAAsB,EACK;AAC3B,EAAA,MAAMC,WAAW,GAAGC,yBAAc,EAAE,CAAA;AACpC,EAAA,MAAMC,MAAM,GAAGH,KAAK,CAACG,MAAM,IAAIF,WAAW,CAAA;AAC1C,EAAA,MAAMG,GAAG,GAAGC,YAAM,CAAiB,IAAI,CAAC,CAAA;EACxC,MAAM;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,aAAa;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGT,KAAK,CAAA;EACrE,MAAM,CAACU,QAAQ,CAAC,GAAGC,cAAQ,CACzB,IAAIC,mCAAqB,CAAC;AACxBT,IAAAA,MAAM,EAAEA,MAAM;AACdU,IAAAA,WAAW,EAAE,aAAa;AAC1BC,IAAAA,OAAO,EAAE,GAAG;mBACZC,wBAAa;IACbT,cAAc;IACdC,QAAQ;IACRC,aAAa;AACbC,IAAAA,UAAAA;AACF,GAAC,CACH,CAAC,CAAA;AAEDO,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACO,SAAS,CAACd,MAAM,CAAC,CAAA;AAC5B,GAAC,EAAE,CAACA,MAAM,EAAEO,QAAQ,CAAC,CAAC,CAAA;AAEtBM,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIV,cAAc,EAAE;AAClBI,MAAAA,QAAQ,CAACQ,iBAAiB,CAACZ,cAAc,CAAC,CAAA;AAC5C,KAAA;AACF,GAAC,EAAE,CAACA,cAAc,EAAEI,QAAQ,CAAC,CAAC,CAAA;AAE9BM,EAAAA,eAAS,CAAC,MAAM;AACd,IAAA,IAAIT,QAAQ,EAAE;AACZG,MAAAA,QAAQ,CAACS,WAAW,CAACZ,QAAQ,CAAC,CAAA;AAChC,KAAA;AACF,GAAC,EAAE,CAACA,QAAQ,EAAEG,QAAQ,CAAC,CAAC,CAAA;AAExBM,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACU,gBAAgB,CAACZ,aAAa,IAAI,KAAK,CAAC,CAAA;AACnD,GAAC,EAAE,CAACA,aAAa,EAAEE,QAAQ,CAAC,CAAC,CAAA;AAE7BM,EAAAA,eAAS,CAAC,MAAM;AACdN,IAAAA,QAAQ,CAACW,aAAa,CAACZ,UAAU,IAAI,EAAE,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACA,UAAU,EAAEC,QAAQ,CAAC,CAAC,CAAA;AAE1BM,EAAAA,eAAS,CAAC,MAAM;IACd,IAAIZ,GAAG,CAACkB,OAAO,EAAE;AACfZ,MAAAA,QAAQ,CAACa,KAAK,CAACnB,GAAG,CAACkB,OAAO,CAAC,CAAA;AAC7B,KAAA;AAEA,IAAA,OAAO,MAAM;MACXZ,QAAQ,CAACc,OAAO,EAAE,CAAA;KACnB,CAAA;AACH,GAAC,EAAE,CAACd,QAAQ,CAAC,CAAC,CAAA;EAEd,oBAAOe,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKtB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAM,CAAC,CAAA;AAC9B;;AC1FO,MAAML,kBAA2D,GAKlEW,qBAA2B;;AAEjC;AACA;AACA;AACA;AACA;AACA;;;;"}

build/lib/devtools.js

 'use client';
-'use strict';
+import React, { useRef, useState, useEffect } from 'react';
+import { useQueryClient, onlineManager } from '@tanstack/react-query';
+import { TanstackQueryDevtools } from '@tanstack/query-devtools';
 
-var React = require('react');
-var reactQuery = require('@tanstack/react-query');
-var queryDevtools = require('@tanstack/query-devtools');
-
 function ReactQueryDevtools(props) {
-  const queryClient = reactQuery.useQueryClient();
+  const queryClient = useQueryClient();
   const client = props.client || queryClient;
-  const ref = React.useRef(null);
+  const ref = useRef(null);
   const {
@@ -18,7 +16,7 @@ buttonPosition,
   } = props;
-  const [devtools] = React.useState(new queryDevtools.TanstackQueryDevtools({
+  const [devtools] = useState(new TanstackQueryDevtools({
     client: client,
     queryFlavor: 'React Query',
     version: '5',
-    onlineManager: reactQuery.onlineManager,
+    onlineManager,
     buttonPosition,
@@ -29,6 +27,6 @@ position,
   }));
-  React.useEffect(() => {
+  useEffect(() => {
     devtools.setClient(client);
   }, [client, devtools]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (buttonPosition) {
@@ -38,3 +36,3 @@ devtools.setButtonPosition(buttonPosition);
   }, [buttonPosition, devtools]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (position) {
@@ -44,9 +42,9 @@ devtools.setPosition(position);
   }, [position, devtools]);
-  React.useEffect(() => {
+  useEffect(() => {
     devtools.setInitialIsOpen(initialIsOpen || false);
   }, [initialIsOpen, devtools]);
-  React.useEffect(() => {
+  useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
-  React.useEffect(() => {
+  useEffect(() => {
     if (ref.current) {
@@ -64,3 +62,3 @@ devtools.mount(ref.current);
 
-exports.ReactQueryDevtools = ReactQueryDevtools;
+export { ReactQueryDevtools };
 //# sourceMappingURL=devtools.js.map

build/lib/devtools.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"devtools.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;;"}
+{"version":3,"file":"devtools.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;;"}

build/lib/index.js

 'use client';
-'use strict';
+import { ReactQueryDevtools as ReactQueryDevtools$1 } from './devtools.js';
 
-var devtools = require('./devtools.js');
-
 const ReactQueryDevtools = process.env.NODE_ENV !== 'development' ? function () {
   return null;
-} : devtools.ReactQueryDevtools;
+} : ReactQueryDevtools$1;
 
@@ -17,3 +15,3 @@ // export const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'] =
 
-exports.ReactQueryDevtools = ReactQueryDevtools;
+export { ReactQueryDevtools };
 //# sourceMappingURL=index.js.map

build/lib/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.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;;"}
+{"version":3,"file":"index.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;;"}

package.json

 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.0.0-alpha.50",
+  "version": "5.0.0-alpha.51",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
@@ -13,22 +13,19 @@ "author": "tannerlinsley",
   },
-  "type": "commonjs",
+  "type": "module",
   "types": "build/lib/index.d.ts",
-  "main": "build/lib/index.js",
-  "module": "build/lib/index.mjs",
+  "main": "build/lib/index.cjs",
+  "module": "build/lib/index.js",
   "exports": {
     ".": {
       "types": "./build/lib/index.d.ts",
-      "import": "./build/lib/index.mjs",
-      "default": "./build/lib/index.js"
+      "import": "./build/lib/index.js",
+      "require": "./build/lib/index.cjs",
+      "default": "./build/lib/index.cjs"
     },
     "./production": {
       "types": "./build/lib/index.d.ts",
-      "import": "./build/lib/index.prod.mjs",
-      "default": "./build/lib/index.prod.js"
+      "import": "./build/lib/index.prod.js",
+      "require": "./build/lib/index.prod.cjs",
+      "default": "./build/lib/index.prod.cjs"
     },
-    "./build/lib/index.prod.js": {
-      "types": "./build/lib/index.d.ts",
-      "import": "./build/lib/index.prod.mjs",
-      "default": "./build/lib/index.prod.js"
-    },
     "./package.json": "./package.json"
@@ -64,5 +61,5 @@ },
     "build": "pnpm build:rollup && pnpm build:types",
-    "build:rollup": "rollup --config rollup.config.mjs",
+    "build:rollup": "rollup --config rollup.config.js",
     "build:types": "tsc --emitDeclarationOnly && cpy index.d.ts index.prod.d.ts --cwd=build/lib"
   }
 }

build/lib/devtools.mjs

-'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.mjs.map

build/lib/devtools.mjs.map

-{"version":3,"file":"devtools.mjs","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;;"}

build/lib/index.mjs

-'use client';
-import { ReactQueryDevtools as ReactQueryDevtools$1 } from './devtools.mjs';
-
-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.mjs.map

build/lib/index.mjs.map

-{"version":3,"file":"index.mjs","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;;"}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

4

-63.64%

Number of medium supply chain risk alerts

1

-83.33%

Is type module

Yes

NaN

Worsened metrics

Total package byte prevSize

38137

-97.72%

Lines of code

505

-96.86%

No dependency changes