@tanstack/vue-query 4.39.0 → 4.39.1

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

@@ -0,0 +1,162 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api';
+import { rankItem } from '@tanstack/match-sorter-utils';
+import { sortFns, getQueryStateLabel, getQueryStatusFg, getQueryStatusBg } from './utils.esm.js';
+
+/* istanbul ignore file */
+const pluginId = 'vue-query';
+const pluginName = 'Vue Query';
+function setupDevtools(app, queryClient) {
+  setupDevtoolsPlugin({
+    id: pluginId,
+    label: pluginName,
+    packageName: 'vue-query',
+    homepage: 'https://tanstack.com/query/v4',
+    logo: 'https://vue-query.vercel.app/vue-query.svg',
+    app,
+    settings: {
+      baseSort: {
+        type: 'choice',
+        component: 'button-group',
+        label: 'Sort Cache Entries',
+        options: [{
+          label: 'ASC',
+          value: 1
+        }, {
+          label: 'DESC',
+          value: -1
+        }],
+        defaultValue: 1
+      },
+      sortFn: {
+        type: 'choice',
+        label: 'Sort Function',
+        options: Object.keys(sortFns).map(key => ({
+          label: key,
+          value: key
+        })),
+        defaultValue: Object.keys(sortFns)[0]
+      }
+    }
+  }, api => {
+    const queryCache = queryClient.getQueryCache();
+    api.addInspector({
+      id: pluginId,
+      label: pluginName,
+      icon: 'api',
+      nodeActions: [{
+        icon: 'cloud_download',
+        tooltip: 'Refetch',
+        action: queryHash => {
+          var _queryCache$get;
+
+          (_queryCache$get = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get.fetch();
+        }
+      }, {
+        icon: 'alarm',
+        tooltip: 'Invalidate',
+        action: queryHash => {
+          const query = queryCache.get(queryHash);
+          queryClient.invalidateQueries(query.queryKey);
+        }
+      }, {
+        icon: 'settings_backup_restore',
+        tooltip: 'Reset',
+        action: queryHash => {
+          var _queryCache$get2;
+
+          (_queryCache$get2 = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get2.reset();
+        }
+      }, {
+        icon: 'delete',
+        tooltip: 'Remove',
+        action: queryHash => {
+          const query = queryCache.get(queryHash);
+          queryCache.remove(query);
+        }
+      }]
+    });
+    api.addTimelineLayer({
+      id: pluginId,
+      label: pluginName,
+      color: 0xffd94c
+    });
+    queryCache.subscribe(event => {
+      api.sendInspectorTree(pluginId);
+      api.sendInspectorState(pluginId);
+      const queryEvents = ['added', 'removed', 'updated'];
+
+      if ( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      event && queryEvents.includes(event.type)) {
+        api.addTimelineEvent({
+          layerId: pluginId,
+          event: {
+            title: event.type,
+            subtitle: event.query.queryHash,
+            time: api.now(),
+            data: {
+              queryHash: event.query.queryHash,
+              ...event
+            }
+          }
+        });
+      }
+    });
+    api.on.getInspectorTree(payload => {
+      if (payload.inspectorId === pluginId) {
+        const queries = queryCache.getAll();
+        const settings = api.getSettings();
+        const filtered = payload.filter ? queries.filter(item => rankItem(item.queryHash, payload.filter).passed) : [...queries];
+        const sorted = filtered.sort((a, b) => sortFns[settings.sortFn](a, b) * settings.baseSort);
+        const nodes = sorted.map(query => {
+          const stateLabel = getQueryStateLabel(query);
+          return {
+            id: query.queryHash,
+            label: query.queryHash,
+            tags: [{
+              label: stateLabel + " [" + query.getObserversCount() + "]",
+              textColor: getQueryStatusFg(query),
+              backgroundColor: getQueryStatusBg(query)
+            }]
+          };
+        });
+        payload.rootNodes = nodes;
+      }
+    });
+    api.on.getInspectorState(payload => {
+      if (payload.inspectorId === pluginId) {
+        const query = queryCache.get(payload.nodeId);
+
+        if (!query) {
+          return;
+        }
+
+        payload.state = {
+          ' Query Details': [{
+            key: 'Query key',
+            value: query.queryHash
+          }, {
+            key: 'Query status',
+            value: getQueryStateLabel(query)
+          }, {
+            key: 'Observers',
+            value: query.getObserversCount()
+          }, {
+            key: 'Last Updated',
+            value: new Date(query.state.dataUpdatedAt).toLocaleTimeString()
+          }],
+          'Data Explorer': [{
+            key: 'Data',
+            value: query.state.data
+          }],
+          'Query Explorer': [{
+            key: 'Query',
+            value: query
+          }]
+        };
+      }
+    });
+  });
+}
+
+export { setupDevtools };
+//# sourceMappingURL=devtools.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.esm.js","sources":["../../../src/devtools/devtools.ts"],"sourcesContent":["/* istanbul ignore file */\n\nimport { setupDevtoolsPlugin } from '@vue/devtools-api'\nimport { rankItem } from '@tanstack/match-sorter-utils'\nimport {\n  getQueryStateLabel,\n  getQueryStatusBg,\n  getQueryStatusFg,\n  sortFns,\n} from './utils'\nimport type { CustomInspectorNode } from '@vue/devtools-api'\nimport type { Query, QueryCacheNotifyEvent } from '@tanstack/query-core'\nimport type { QueryClient } from '../queryClient'\n\nconst pluginId = 'vue-query'\nconst pluginName = 'Vue Query'\n\nexport function setupDevtools(app: any, queryClient: QueryClient) {\n  setupDevtoolsPlugin(\n    {\n      id: pluginId,\n      label: pluginName,\n      packageName: 'vue-query',\n      homepage: 'https://tanstack.com/query/v4',\n      logo: 'https://vue-query.vercel.app/vue-query.svg',\n      app,\n      settings: {\n        baseSort: {\n          type: 'choice',\n          component: 'button-group',\n          label: 'Sort Cache Entries',\n          options: [\n            {\n              label: 'ASC',\n              value: 1,\n            },\n            {\n              label: 'DESC',\n              value: -1,\n            },\n          ],\n          defaultValue: 1,\n        },\n        sortFn: {\n          type: 'choice',\n          label: 'Sort Function',\n          options: Object.keys(sortFns).map((key) => ({\n            label: key,\n            value: key,\n          })),\n          defaultValue: Object.keys(sortFns)[0]!,\n        },\n      },\n    },\n    (api) => {\n      const queryCache = queryClient.getQueryCache()\n\n      api.addInspector({\n        id: pluginId,\n        label: pluginName,\n        icon: 'api',\n        nodeActions: [\n          {\n            icon: 'cloud_download',\n            tooltip: 'Refetch',\n            action: (queryHash: string) => {\n              queryCache.get(queryHash)?.fetch()\n            },\n          },\n          {\n            icon: 'alarm',\n            tooltip: 'Invalidate',\n            action: (queryHash: string) => {\n              const query = queryCache.get(queryHash) as Query\n              queryClient.invalidateQueries(query.queryKey)\n            },\n          },\n          {\n            icon: 'settings_backup_restore',\n            tooltip: 'Reset',\n            action: (queryHash: string) => {\n              queryCache.get(queryHash)?.reset()\n            },\n          },\n          {\n            icon: 'delete',\n            tooltip: 'Remove',\n            action: (queryHash: string) => {\n              const query = queryCache.get(queryHash) as Query\n              queryCache.remove(query)\n            },\n          },\n        ],\n      })\n\n      api.addTimelineLayer({\n        id: pluginId,\n        label: pluginName,\n        color: 0xffd94c,\n      })\n\n      queryCache.subscribe((event) => {\n        api.sendInspectorTree(pluginId)\n        api.sendInspectorState(pluginId)\n\n        const queryEvents: QueryCacheNotifyEvent['type'][] = [\n          'added',\n          'removed',\n          'updated',\n        ]\n        if (\n          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n          event &&\n          queryEvents.includes(event.type)\n        ) {\n          api.addTimelineEvent({\n            layerId: pluginId,\n            event: {\n              title: event.type,\n              subtitle: event.query.queryHash,\n              time: api.now(),\n              data: {\n                queryHash: event.query.queryHash,\n                ...event,\n              },\n            },\n          })\n        }\n      })\n\n      api.on.getInspectorTree((payload) => {\n        if (payload.inspectorId === pluginId) {\n          const queries = queryCache.getAll()\n          const settings = api.getSettings()\n\n          const filtered = payload.filter\n            ? queries.filter(\n                (item) => rankItem(item.queryHash, payload.filter).passed,\n              )\n            : [...queries]\n\n          const sorted = filtered.sort(\n            (a, b) => sortFns[settings.sortFn]!(a, b) * settings.baseSort,\n          )\n\n          const nodes: CustomInspectorNode[] = sorted.map((query) => {\n            const stateLabel = getQueryStateLabel(query)\n\n            return {\n              id: query.queryHash,\n              label: query.queryHash,\n              tags: [\n                {\n                  label: `${stateLabel} [${query.getObserversCount()}]`,\n                  textColor: getQueryStatusFg(query),\n                  backgroundColor: getQueryStatusBg(query),\n                },\n              ],\n            }\n          })\n          payload.rootNodes = nodes\n        }\n      })\n\n      api.on.getInspectorState((payload) => {\n        if (payload.inspectorId === pluginId) {\n          const query = queryCache.get(payload.nodeId)\n\n          if (!query) {\n            return\n          }\n\n          payload.state = {\n            ' Query Details': [\n              {\n                key: 'Query key',\n                value: query.queryHash as string,\n              },\n              {\n                key: 'Query status',\n                value: getQueryStateLabel(query),\n              },\n              {\n                key: 'Observers',\n                value: query.getObserversCount(),\n              },\n              {\n                key: 'Last Updated',\n                value: new Date(query.state.dataUpdatedAt).toLocaleTimeString(),\n              },\n            ],\n            'Data Explorer': [\n              {\n                key: 'Data',\n                value: query.state.data,\n              },\n            ],\n            'Query Explorer': [\n              {\n                key: 'Query',\n                value: query,\n              },\n            ],\n          }\n        }\n      })\n    },\n  )\n}\n"],"names":["pluginId","pluginName","setupDevtools","app","queryClient","setupDevtoolsPlugin","id","label","packageName","homepage","logo","settings","baseSort","type","component","options","value","defaultValue","sortFn","Object","keys","sortFns","map","key","api","queryCache","getQueryCache","addInspector","icon","nodeActions","tooltip","action","queryHash","get","fetch","query","invalidateQueries","queryKey","reset","remove","addTimelineLayer","color","subscribe","event","sendInspectorTree","sendInspectorState","queryEvents","includes","addTimelineEvent","layerId","title","subtitle","time","now","data","on","getInspectorTree","payload","inspectorId","queries","getAll","getSettings","filtered","filter","item","rankItem","passed","sorted","sort","a","b","nodes","stateLabel","getQueryStateLabel","tags","getObserversCount","textColor","getQueryStatusFg","backgroundColor","getQueryStatusBg","rootNodes","getInspectorState","nodeId","state","Date","dataUpdatedAt","toLocaleTimeString"],"mappings":"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"}

package/build/lib/devtools/devtools.js

@@ -0,0 +1,166 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var devtoolsApi = require('@vue/devtools-api');
+var matchSorterUtils = require('@tanstack/match-sorter-utils');
+var utils = require('./utils.js');
+
+/* istanbul ignore file */
+const pluginId = 'vue-query';
+const pluginName = 'Vue Query';
+function setupDevtools(app, queryClient) {
+  devtoolsApi.setupDevtoolsPlugin({
+    id: pluginId,
+    label: pluginName,
+    packageName: 'vue-query',
+    homepage: 'https://tanstack.com/query/v4',
+    logo: 'https://vue-query.vercel.app/vue-query.svg',
+    app,
+    settings: {
+      baseSort: {
+        type: 'choice',
+        component: 'button-group',
+        label: 'Sort Cache Entries',
+        options: [{
+          label: 'ASC',
+          value: 1
+        }, {
+          label: 'DESC',
+          value: -1
+        }],
+        defaultValue: 1
+      },
+      sortFn: {
+        type: 'choice',
+        label: 'Sort Function',
+        options: Object.keys(utils.sortFns).map(key => ({
+          label: key,
+          value: key
+        })),
+        defaultValue: Object.keys(utils.sortFns)[0]
+      }
+    }
+  }, api => {
+    const queryCache = queryClient.getQueryCache();
+    api.addInspector({
+      id: pluginId,
+      label: pluginName,
+      icon: 'api',
+      nodeActions: [{
+        icon: 'cloud_download',
+        tooltip: 'Refetch',
+        action: queryHash => {
+          var _queryCache$get;
+
+          (_queryCache$get = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get.fetch();
+        }
+      }, {
+        icon: 'alarm',
+        tooltip: 'Invalidate',
+        action: queryHash => {
+          const query = queryCache.get(queryHash);
+          queryClient.invalidateQueries(query.queryKey);
+        }
+      }, {
+        icon: 'settings_backup_restore',
+        tooltip: 'Reset',
+        action: queryHash => {
+          var _queryCache$get2;
+
+          (_queryCache$get2 = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get2.reset();
+        }
+      }, {
+        icon: 'delete',
+        tooltip: 'Remove',
+        action: queryHash => {
+          const query = queryCache.get(queryHash);
+          queryCache.remove(query);
+        }
+      }]
+    });
+    api.addTimelineLayer({
+      id: pluginId,
+      label: pluginName,
+      color: 0xffd94c
+    });
+    queryCache.subscribe(event => {
+      api.sendInspectorTree(pluginId);
+      api.sendInspectorState(pluginId);
+      const queryEvents = ['added', 'removed', 'updated'];
+
+      if ( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      event && queryEvents.includes(event.type)) {
+        api.addTimelineEvent({
+          layerId: pluginId,
+          event: {
+            title: event.type,
+            subtitle: event.query.queryHash,
+            time: api.now(),
+            data: {
+              queryHash: event.query.queryHash,
+              ...event
+            }
+          }
+        });
+      }
+    });
+    api.on.getInspectorTree(payload => {
+      if (payload.inspectorId === pluginId) {
+        const queries = queryCache.getAll();
+        const settings = api.getSettings();
+        const filtered = payload.filter ? queries.filter(item => matchSorterUtils.rankItem(item.queryHash, payload.filter).passed) : [...queries];
+        const sorted = filtered.sort((a, b) => utils.sortFns[settings.sortFn](a, b) * settings.baseSort);
+        const nodes = sorted.map(query => {
+          const stateLabel = utils.getQueryStateLabel(query);
+          return {
+            id: query.queryHash,
+            label: query.queryHash,
+            tags: [{
+              label: stateLabel + " [" + query.getObserversCount() + "]",
+              textColor: utils.getQueryStatusFg(query),
+              backgroundColor: utils.getQueryStatusBg(query)
+            }]
+          };
+        });
+        payload.rootNodes = nodes;
+      }
+    });
+    api.on.getInspectorState(payload => {
+      if (payload.inspectorId === pluginId) {
+        const query = queryCache.get(payload.nodeId);
+
+        if (!query) {
+          return;
+        }
+
+        payload.state = {
+          ' Query Details': [{
+            key: 'Query key',
+            value: query.queryHash
+          }, {
+            key: 'Query status',
+            value: utils.getQueryStateLabel(query)
+          }, {
+            key: 'Observers',
+            value: query.getObserversCount()
+          }, {
+            key: 'Last Updated',
+            value: new Date(query.state.dataUpdatedAt).toLocaleTimeString()
+          }],
+          'Data Explorer': [{
+            key: 'Data',
+            value: query.state.data
+          }],
+          'Query Explorer': [{
+            key: 'Query',
+            value: query
+          }]
+        };
+      }
+    });
+  });
+}
+
+exports.setupDevtools = setupDevtools;
+//# sourceMappingURL=devtools.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.js","sources":["../../../src/devtools/devtools.ts"],"sourcesContent":["/* istanbul ignore file */\n\nimport { setupDevtoolsPlugin } from '@vue/devtools-api'\nimport { rankItem } from '@tanstack/match-sorter-utils'\nimport {\n  getQueryStateLabel,\n  getQueryStatusBg,\n  getQueryStatusFg,\n  sortFns,\n} from './utils'\nimport type { CustomInspectorNode } from '@vue/devtools-api'\nimport type { Query, QueryCacheNotifyEvent } from '@tanstack/query-core'\nimport type { QueryClient } from '../queryClient'\n\nconst pluginId = 'vue-query'\nconst pluginName = 'Vue Query'\n\nexport function setupDevtools(app: any, queryClient: QueryClient) {\n  setupDevtoolsPlugin(\n    {\n      id: pluginId,\n      label: pluginName,\n      packageName: 'vue-query',\n      homepage: 'https://tanstack.com/query/v4',\n      logo: 'https://vue-query.vercel.app/vue-query.svg',\n      app,\n      settings: {\n        baseSort: {\n          type: 'choice',\n          component: 'button-group',\n          label: 'Sort Cache Entries',\n          options: [\n            {\n              label: 'ASC',\n              value: 1,\n            },\n            {\n              label: 'DESC',\n              value: -1,\n            },\n          ],\n          defaultValue: 1,\n        },\n        sortFn: {\n          type: 'choice',\n          label: 'Sort Function',\n          options: Object.keys(sortFns).map((key) => ({\n            label: key,\n            value: key,\n          })),\n          defaultValue: Object.keys(sortFns)[0]!,\n        },\n      },\n    },\n    (api) => {\n      const queryCache = queryClient.getQueryCache()\n\n      api.addInspector({\n        id: pluginId,\n        label: pluginName,\n        icon: 'api',\n        nodeActions: [\n          {\n            icon: 'cloud_download',\n            tooltip: 'Refetch',\n            action: (queryHash: string) => {\n              queryCache.get(queryHash)?.fetch()\n            },\n          },\n          {\n            icon: 'alarm',\n            tooltip: 'Invalidate',\n            action: (queryHash: string) => {\n              const query = queryCache.get(queryHash) as Query\n              queryClient.invalidateQueries(query.queryKey)\n            },\n          },\n          {\n            icon: 'settings_backup_restore',\n            tooltip: 'Reset',\n            action: (queryHash: string) => {\n              queryCache.get(queryHash)?.reset()\n            },\n          },\n          {\n            icon: 'delete',\n            tooltip: 'Remove',\n            action: (queryHash: string) => {\n              const query = queryCache.get(queryHash) as Query\n              queryCache.remove(query)\n            },\n          },\n        ],\n      })\n\n      api.addTimelineLayer({\n        id: pluginId,\n        label: pluginName,\n        color: 0xffd94c,\n      })\n\n      queryCache.subscribe((event) => {\n        api.sendInspectorTree(pluginId)\n        api.sendInspectorState(pluginId)\n\n        const queryEvents: QueryCacheNotifyEvent['type'][] = [\n          'added',\n          'removed',\n          'updated',\n        ]\n        if (\n          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n          event &&\n          queryEvents.includes(event.type)\n        ) {\n          api.addTimelineEvent({\n            layerId: pluginId,\n            event: {\n              title: event.type,\n              subtitle: event.query.queryHash,\n              time: api.now(),\n              data: {\n                queryHash: event.query.queryHash,\n                ...event,\n              },\n            },\n          })\n        }\n      })\n\n      api.on.getInspectorTree((payload) => {\n        if (payload.inspectorId === pluginId) {\n          const queries = queryCache.getAll()\n          const settings = api.getSettings()\n\n          const filtered = payload.filter\n            ? queries.filter(\n                (item) => rankItem(item.queryHash, payload.filter).passed,\n              )\n            : [...queries]\n\n          const sorted = filtered.sort(\n            (a, b) => sortFns[settings.sortFn]!(a, b) * settings.baseSort,\n          )\n\n          const nodes: CustomInspectorNode[] = sorted.map((query) => {\n            const stateLabel = getQueryStateLabel(query)\n\n            return {\n              id: query.queryHash,\n              label: query.queryHash,\n              tags: [\n                {\n                  label: `${stateLabel} [${query.getObserversCount()}]`,\n                  textColor: getQueryStatusFg(query),\n                  backgroundColor: getQueryStatusBg(query),\n                },\n              ],\n            }\n          })\n          payload.rootNodes = nodes\n        }\n      })\n\n      api.on.getInspectorState((payload) => {\n        if (payload.inspectorId === pluginId) {\n          const query = queryCache.get(payload.nodeId)\n\n          if (!query) {\n            return\n          }\n\n          payload.state = {\n            ' Query Details': [\n              {\n                key: 'Query key',\n                value: query.queryHash as string,\n              },\n              {\n                key: 'Query status',\n                value: getQueryStateLabel(query),\n              },\n              {\n                key: 'Observers',\n                value: query.getObserversCount(),\n              },\n              {\n                key: 'Last Updated',\n                value: new Date(query.state.dataUpdatedAt).toLocaleTimeString(),\n              },\n            ],\n            'Data Explorer': [\n              {\n                key: 'Data',\n                value: query.state.data,\n              },\n            ],\n            'Query Explorer': [\n              {\n                key: 'Query',\n                value: query,\n              },\n            ],\n          }\n        }\n      })\n    },\n  )\n}\n"],"names":["pluginId","pluginName","setupDevtools","app","queryClient","setupDevtoolsPlugin","id","label","packageName","homepage","logo","settings","baseSort","type","component","options","value","defaultValue","sortFn","Object","keys","sortFns","map","key","api","queryCache","getQueryCache","addInspector","icon","nodeActions","tooltip","action","queryHash","get","fetch","query","invalidateQueries","queryKey","reset","remove","addTimelineLayer","color","subscribe","event","sendInspectorTree","sendInspectorState","queryEvents","includes","addTimelineEvent","layerId","title","subtitle","time","now","data","on","getInspectorTree","payload","inspectorId","queries","getAll","getSettings","filtered","filter","item","rankItem","passed","sorted","sort","a","b","nodes","stateLabel","getQueryStateLabel","tags","getObserversCount","textColor","getQueryStatusFg","backgroundColor","getQueryStatusBg","rootNodes","getInspectorState","nodeId","state","Date","dataUpdatedAt","toLocaleTimeString"],"mappings":"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"}

package/build/lib/devtools/devtools.mjs

@@ -0,0 +1,162 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api';
+import { rankItem } from '@tanstack/match-sorter-utils';
+import { sortFns, getQueryStateLabel, getQueryStatusFg, getQueryStatusBg } from './utils.mjs';
+
+/* istanbul ignore file */
+const pluginId = 'vue-query';
+const pluginName = 'Vue Query';
+function setupDevtools(app, queryClient) {
+  setupDevtoolsPlugin({
+    id: pluginId,
+    label: pluginName,
+    packageName: 'vue-query',
+    homepage: 'https://tanstack.com/query/v4',
+    logo: 'https://vue-query.vercel.app/vue-query.svg',
+    app,
+    settings: {
+      baseSort: {
+        type: 'choice',
+        component: 'button-group',
+        label: 'Sort Cache Entries',
+        options: [{
+          label: 'ASC',
+          value: 1
+        }, {
+          label: 'DESC',
+          value: -1
+        }],
+        defaultValue: 1
+      },
+      sortFn: {
+        type: 'choice',
+        label: 'Sort Function',
+        options: Object.keys(sortFns).map(key => ({
+          label: key,
+          value: key
+        })),
+        defaultValue: Object.keys(sortFns)[0]
+      }
+    }
+  }, api => {
+    const queryCache = queryClient.getQueryCache();
+    api.addInspector({
+      id: pluginId,
+      label: pluginName,
+      icon: 'api',
+      nodeActions: [{
+        icon: 'cloud_download',
+        tooltip: 'Refetch',
+        action: queryHash => {
+          var _queryCache$get;
+
+          (_queryCache$get = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get.fetch();
+        }
+      }, {
+        icon: 'alarm',
+        tooltip: 'Invalidate',
+        action: queryHash => {
+          const query = queryCache.get(queryHash);
+          queryClient.invalidateQueries(query.queryKey);
+        }
+      }, {
+        icon: 'settings_backup_restore',
+        tooltip: 'Reset',
+        action: queryHash => {
+          var _queryCache$get2;
+
+          (_queryCache$get2 = queryCache.get(queryHash)) == null ? void 0 : _queryCache$get2.reset();
+        }
+      }, {
+        icon: 'delete',
+        tooltip: 'Remove',
+        action: queryHash => {
+          const query = queryCache.get(queryHash);
+          queryCache.remove(query);
+        }
+      }]
+    });
+    api.addTimelineLayer({
+      id: pluginId,
+      label: pluginName,
+      color: 0xffd94c
+    });
+    queryCache.subscribe(event => {
+      api.sendInspectorTree(pluginId);
+      api.sendInspectorState(pluginId);
+      const queryEvents = ['added', 'removed', 'updated'];
+
+      if ( // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      event && queryEvents.includes(event.type)) {
+        api.addTimelineEvent({
+          layerId: pluginId,
+          event: {
+            title: event.type,
+            subtitle: event.query.queryHash,
+            time: api.now(),
+            data: {
+              queryHash: event.query.queryHash,
+              ...event
+            }
+          }
+        });
+      }
+    });
+    api.on.getInspectorTree(payload => {
+      if (payload.inspectorId === pluginId) {
+        const queries = queryCache.getAll();
+        const settings = api.getSettings();
+        const filtered = payload.filter ? queries.filter(item => rankItem(item.queryHash, payload.filter).passed) : [...queries];
+        const sorted = filtered.sort((a, b) => sortFns[settings.sortFn](a, b) * settings.baseSort);
+        const nodes = sorted.map(query => {
+          const stateLabel = getQueryStateLabel(query);
+          return {
+            id: query.queryHash,
+            label: query.queryHash,
+            tags: [{
+              label: stateLabel + " [" + query.getObserversCount() + "]",
+              textColor: getQueryStatusFg(query),
+              backgroundColor: getQueryStatusBg(query)
+            }]
+          };
+        });
+        payload.rootNodes = nodes;
+      }
+    });
+    api.on.getInspectorState(payload => {
+      if (payload.inspectorId === pluginId) {
+        const query = queryCache.get(payload.nodeId);
+
+        if (!query) {
+          return;
+        }
+
+        payload.state = {
+          ' Query Details': [{
+            key: 'Query key',
+            value: query.queryHash
+          }, {
+            key: 'Query status',
+            value: getQueryStateLabel(query)
+          }, {
+            key: 'Observers',
+            value: query.getObserversCount()
+          }, {
+            key: 'Last Updated',
+            value: new Date(query.state.dataUpdatedAt).toLocaleTimeString()
+          }],
+          'Data Explorer': [{
+            key: 'Data',
+            value: query.state.data
+          }],
+          'Query Explorer': [{
+            key: 'Query',
+            value: query
+          }]
+        };
+      }
+    });
+  });
+}
+
+export { setupDevtools };
+//# sourceMappingURL=devtools.mjs.map

package/build/lib/devtools/devtools.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools.mjs","sources":["../../../src/devtools/devtools.ts"],"sourcesContent":["/* istanbul ignore file */\n\nimport { setupDevtoolsPlugin } from '@vue/devtools-api'\nimport { rankItem } from '@tanstack/match-sorter-utils'\nimport {\n  getQueryStateLabel,\n  getQueryStatusBg,\n  getQueryStatusFg,\n  sortFns,\n} from './utils'\nimport type { CustomInspectorNode } from '@vue/devtools-api'\nimport type { Query, QueryCacheNotifyEvent } from '@tanstack/query-core'\nimport type { QueryClient } from '../queryClient'\n\nconst pluginId = 'vue-query'\nconst pluginName = 'Vue Query'\n\nexport function setupDevtools(app: any, queryClient: QueryClient) {\n  setupDevtoolsPlugin(\n    {\n      id: pluginId,\n      label: pluginName,\n      packageName: 'vue-query',\n      homepage: 'https://tanstack.com/query/v4',\n      logo: 'https://vue-query.vercel.app/vue-query.svg',\n      app,\n      settings: {\n        baseSort: {\n          type: 'choice',\n          component: 'button-group',\n          label: 'Sort Cache Entries',\n          options: [\n            {\n              label: 'ASC',\n              value: 1,\n            },\n            {\n              label: 'DESC',\n              value: -1,\n            },\n          ],\n          defaultValue: 1,\n        },\n        sortFn: {\n          type: 'choice',\n          label: 'Sort Function',\n          options: Object.keys(sortFns).map((key) => ({\n            label: key,\n            value: key,\n          })),\n          defaultValue: Object.keys(sortFns)[0]!,\n        },\n      },\n    },\n    (api) => {\n      const queryCache = queryClient.getQueryCache()\n\n      api.addInspector({\n        id: pluginId,\n        label: pluginName,\n        icon: 'api',\n        nodeActions: [\n          {\n            icon: 'cloud_download',\n            tooltip: 'Refetch',\n            action: (queryHash: string) => {\n              queryCache.get(queryHash)?.fetch()\n            },\n          },\n          {\n            icon: 'alarm',\n            tooltip: 'Invalidate',\n            action: (queryHash: string) => {\n              const query = queryCache.get(queryHash) as Query\n              queryClient.invalidateQueries(query.queryKey)\n            },\n          },\n          {\n            icon: 'settings_backup_restore',\n            tooltip: 'Reset',\n            action: (queryHash: string) => {\n              queryCache.get(queryHash)?.reset()\n            },\n          },\n          {\n            icon: 'delete',\n            tooltip: 'Remove',\n            action: (queryHash: string) => {\n              const query = queryCache.get(queryHash) as Query\n              queryCache.remove(query)\n            },\n          },\n        ],\n      })\n\n      api.addTimelineLayer({\n        id: pluginId,\n        label: pluginName,\n        color: 0xffd94c,\n      })\n\n      queryCache.subscribe((event) => {\n        api.sendInspectorTree(pluginId)\n        api.sendInspectorState(pluginId)\n\n        const queryEvents: QueryCacheNotifyEvent['type'][] = [\n          'added',\n          'removed',\n          'updated',\n        ]\n        if (\n          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n          event &&\n          queryEvents.includes(event.type)\n        ) {\n          api.addTimelineEvent({\n            layerId: pluginId,\n            event: {\n              title: event.type,\n              subtitle: event.query.queryHash,\n              time: api.now(),\n              data: {\n                queryHash: event.query.queryHash,\n                ...event,\n              },\n            },\n          })\n        }\n      })\n\n      api.on.getInspectorTree((payload) => {\n        if (payload.inspectorId === pluginId) {\n          const queries = queryCache.getAll()\n          const settings = api.getSettings()\n\n          const filtered = payload.filter\n            ? queries.filter(\n                (item) => rankItem(item.queryHash, payload.filter).passed,\n              )\n            : [...queries]\n\n          const sorted = filtered.sort(\n            (a, b) => sortFns[settings.sortFn]!(a, b) * settings.baseSort,\n          )\n\n          const nodes: CustomInspectorNode[] = sorted.map((query) => {\n            const stateLabel = getQueryStateLabel(query)\n\n            return {\n              id: query.queryHash,\n              label: query.queryHash,\n              tags: [\n                {\n                  label: `${stateLabel} [${query.getObserversCount()}]`,\n                  textColor: getQueryStatusFg(query),\n                  backgroundColor: getQueryStatusBg(query),\n                },\n              ],\n            }\n          })\n          payload.rootNodes = nodes\n        }\n      })\n\n      api.on.getInspectorState((payload) => {\n        if (payload.inspectorId === pluginId) {\n          const query = queryCache.get(payload.nodeId)\n\n          if (!query) {\n            return\n          }\n\n          payload.state = {\n            ' Query Details': [\n              {\n                key: 'Query key',\n                value: query.queryHash as string,\n              },\n              {\n                key: 'Query status',\n                value: getQueryStateLabel(query),\n              },\n              {\n                key: 'Observers',\n                value: query.getObserversCount(),\n              },\n              {\n                key: 'Last Updated',\n                value: new Date(query.state.dataUpdatedAt).toLocaleTimeString(),\n              },\n            ],\n            'Data Explorer': [\n              {\n                key: 'Data',\n                value: query.state.data,\n              },\n            ],\n            'Query Explorer': [\n              {\n                key: 'Query',\n                value: query,\n              },\n            ],\n          }\n        }\n      })\n    },\n  )\n}\n"],"names":["pluginId","pluginName","setupDevtools","app","queryClient","setupDevtoolsPlugin","id","label","packageName","homepage","logo","settings","baseSort","type","component","options","value","defaultValue","sortFn","Object","keys","sortFns","map","key","api","queryCache","getQueryCache","addInspector","icon","nodeActions","tooltip","action","queryHash","get","fetch","query","invalidateQueries","queryKey","reset","remove","addTimelineLayer","color","subscribe","event","sendInspectorTree","sendInspectorState","queryEvents","includes","addTimelineEvent","layerId","title","subtitle","time","now","data","on","getInspectorTree","payload","inspectorId","queries","getAll","getSettings","filtered","filter","item","rankItem","passed","sorted","sort","a","b","nodes","stateLabel","getQueryStateLabel","tags","getObserversCount","textColor","getQueryStatusFg","backgroundColor","getQueryStatusBg","rootNodes","getInspectorState","nodeId","state","Date","dataUpdatedAt","toLocaleTimeString"],"mappings":"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"}

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

@@ -0,0 +1,103 @@
+/* istanbul ignore file */
+// eslint-disable-next-line no-shadow
+var QueryState;
+
+(function (QueryState) {
+  QueryState[QueryState["Fetching"] = 0] = "Fetching";
+  QueryState[QueryState["Fresh"] = 1] = "Fresh";
+  QueryState[QueryState["Stale"] = 2] = "Stale";
+  QueryState[QueryState["Inactive"] = 3] = "Inactive";
+  QueryState[QueryState["Paused"] = 4] = "Paused";
+})(QueryState || (QueryState = {}));
+
+function getQueryState(query) {
+  if (query.state.fetchStatus === 'fetching') {
+    return QueryState.Fetching;
+  }
+
+  if (query.state.fetchStatus === 'paused') {
+    return QueryState.Paused;
+  }
+
+  if (!query.getObserversCount()) {
+    return QueryState.Inactive;
+  }
+
+  if (query.isStale()) {
+    return QueryState.Stale;
+  }
+
+  return QueryState.Fresh;
+}
+function getQueryStateLabel(query) {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Fetching) {
+    return 'fetching';
+  }
+
+  if (queryState === QueryState.Paused) {
+    return 'paused';
+  }
+
+  if (queryState === QueryState.Stale) {
+    return 'stale';
+  }
+
+  if (queryState === QueryState.Inactive) {
+    return 'inactive';
+  }
+
+  return 'fresh';
+}
+function getQueryStatusFg(query) {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Stale) {
+    return 0x000000;
+  }
+
+  return 0xffffff;
+}
+function getQueryStatusBg(query) {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Fetching) {
+    return 0x006bff;
+  }
+
+  if (queryState === QueryState.Paused) {
+    return 0x8c49eb;
+  }
+
+  if (queryState === QueryState.Stale) {
+    return 0xffb200;
+  }
+
+  if (queryState === QueryState.Inactive) {
+    return 0x3f4e60;
+  }
+
+  return 0x008327;
+}
+
+const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
+
+const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
+
+const statusAndDateSort = (a, b) => {
+  if (getQueryState(a) === getQueryState(b)) {
+    return dateSort(a, b);
+  }
+
+  return getQueryState(a) > getQueryState(b) ? 1 : -1;
+};
+
+const sortFns = {
+  'Status > Last Updated': statusAndDateSort,
+  'Query Hash': queryHashSort,
+  'Last Updated': dateSort
+};
+
+export { getQueryState, getQueryStateLabel, getQueryStatusBg, getQueryStatusFg, sortFns };
+//# sourceMappingURL=utils.esm.js.map