fix: use match-sorter-utils, simplify sorting (#4258)

* fix: use match-sorter-utils, simplify sorting * fix: change localstorage key * fix: exclude babel preset for vue * test: fix test
TanStack · Oct 7, 2022 · 667efe3 · 667efe3
1 parent ae7b2ab
commit 667efe3
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 52 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -33,7 +33,7 @@ module.exports = {
   ].filter(Boolean),
   overrides: [
     {
-      exclude: './packages/solid-query/**',
+      exclude: ['./packages/solid-query/**', './packages/vue-query/**'],
       presets: ['@babel/react'],
     },
     {

diff --git a/examples/vue/basic/vite.config.ts b/examples/vue/basic/vite.config.ts
@@ -5,7 +5,6 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
   plugins: [vue()],
   optimizeDeps: {
-    include: ["remove-accents"],
     exclude: ["vue-query", "vue-demi"],
   },
 });
diff --git a/packages/react-query-devtools/src/__tests__/devtools.test.tsx b/packages/react-query-devtools/src/__tests__/devtools.test.tsx
@@ -555,7 +555,7 @@ describe('ReactQueryDevtools', () => {
   })
 
   it('should initialize filtering and sorting values with defaults when they are not stored in localstorage', () => {
-    localStorage.removeItem('reactQueryDevtoolsSortDesc')
+    localStorage.removeItem('reactQueryDevtoolsBaseSort')
     localStorage.removeItem('reactQueryDevtoolsSortFn')
     localStorage.removeItem('reactQueryDevtoolsFilter')
 
@@ -593,7 +593,7 @@ describe('ReactQueryDevtools', () => {
   })
 
   it('should initialize sorting values with ones stored in localstorage', async () => {
-    localStorage.setItem('reactQueryDevtoolsSortDesc', 'true')
+    localStorage.setItem('reactQueryDevtoolsBaseSort', 'true')
     localStorage.setItem(
       'reactQueryDevtoolsSortFn',
       JSON.stringify(Object.keys(sortFns)[1]),

diff --git a/packages/react-query-devtools/src/devtools.tsx b/packages/react-query-devtools/src/devtools.tsx
@@ -11,7 +11,7 @@ import {
   onlineManager,
   notifyManager,
 } from '@tanstack/react-query'
-import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
+import { rankItem } from '@tanstack/match-sorter-utils'
 import useLocalStorage from './useLocalStorage'
 import { sortFns, useIsMounted } from './utils'
 import ScreenReader from './screenreader'
@@ -418,9 +418,9 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
 
   const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '')
 
-  const [sortDesc, setSortDesc] = useLocalStorage(
-    'reactQueryDevtoolsSortDesc',
-    false,
+  const [baseSort, setBaseSort] = useLocalStorage(
+    'reactQueryDevtoolsBaseSort',
+    1,
   )
 
   const sortFn = React.useMemo(() => sortFns[sort as string], [sort])
@@ -438,26 +438,23 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
 
   const queries = React.useMemo(() => {
     const unsortedQueries = queryCache.getAll()
-    const sorted = queriesCount > 0 ? [...unsortedQueries].sort(sortFn) : []
 
-    if (sortDesc) {
-      sorted.reverse()
+    if (queriesCount === 0) {
+      return []
     }
 
-    if (!filter) {
-      return sorted
-    }
-
-    let ranked = sorted.map(
-      (item) => [item, rankItem(item.queryHash, filter)] as const,
-    )
-
-    ranked = ranked.filter((d) => d[1].passed)
+    const filtered = filter
+      ? unsortedQueries.filter(
+          (item) => rankItem(item.queryHash, filter).passed,
+        )
+      : [...unsortedQueries]
 
-    ranked = ranked.sort((a, b) => compareItems(a[1], b[1]))
+    const sorted = sortFn
+      ? filtered.sort((a, b) => sortFn(a, b) * (baseSort as number))
+      : filtered
 
-    return ranked.map((d) => d[0])
-  }, [sortDesc, sortFn, filter, queriesCount, queryCache])
+    return sorted
+  }, [baseSort, sortFn, filter, queriesCount, queryCache])
 
   const [isMockOffline, setMockOffline] = React.useState(false)
 
@@ -596,13 +593,13 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                       </Select>
                       <Button
                         type="button"
-                        onClick={() => setSortDesc((old) => !old)}
+                        onClick={() => setBaseSort((old) => old * -1)}
                         style={{
                           padding: '.3em .4em',
                           marginRight: '.5em',
                         }}
                       >
-                        {sortDesc ? '⬇ Desc' : '⬆ Asc'}
+                        {baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
                       </Button>
                       <Button
                         type="button"

diff --git a/packages/react-query-devtools/src/utils.ts b/packages/react-query-devtools/src/utils.ts
@@ -124,6 +124,9 @@ export const displayValue = (value: unknown) => {
   return JSON.stringify(json)
 }
 
+// Sorting functions
+type SortFn = (a: Query, b: Query) => number
+
 const getStatusRank = (q: Query) =>
   q.state.fetchStatus !== 'idle'
     ? 0
@@ -133,14 +136,21 @@ const getStatusRank = (q: Query) =>
     ? 2
     : 1
 
-export const sortFns: Record<string, (a: Query, b: Query) => number> = {
-  'Status > Last Updated': (a, b) =>
-    getStatusRank(a) === getStatusRank(b)
-      ? (sortFns['Last Updated']?.(a, b) as number)
-      : getStatusRank(a) > getStatusRank(b)
-      ? 1
-      : -1,
-  'Query Hash': (a, b) => (a.queryHash > b.queryHash ? 1 : -1),
-  'Last Updated': (a, b) =>
-    a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1,
+const queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)
+
+const dateSort: SortFn = (a, b) =>
+  a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
+
+const statusAndDateSort: SortFn = (a, b) => {
+  if (getStatusRank(a) === getStatusRank(b)) {
+    return dateSort(a, b)
+  }
+
+  return getStatusRank(a) > getStatusRank(b) ? 1 : -1
+}
+
+export const sortFns: Record<string, SortFn> = {
+  'Status > Last Updated': statusAndDateSort,
+  'Query Hash': queryHashSort,
+  'Last Updated': dateSort,
 }
diff --git a/packages/vue-query/README.md b/packages/vue-query/README.md
@@ -1,4 +1,4 @@
-[![Vue Query logo](./media/vue-query.png)](https://github.com/TanStack/query/tree/main/packages/vue-query)
+[![Vue Query logo](https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.png)](https://github.com/TanStack/query/tree/main/packages/vue-query)
 
 [![npm version](https://img.shields.io/npm/v/@tanstack/vue-query)](https://www.npmjs.com/package/@tanstack/vue-query)
 [![npm license](https://img.shields.io/npm/l/@tanstack/vue-query)](https://github.com/TanStack/query/blob/main/LICENSE)

diff --git a/packages/vue-query/package.json b/packages/vue-query/package.json
@@ -40,7 +40,7 @@
   "dependencies": {
     "@tanstack/query-core": "workspace:*",
     "@vue/devtools-api": "^6.4.2",
-    "match-sorter": "^6.3.1",
+    "@tanstack/match-sorter-utils": "^8.1.1",
     "vue-demi": "^0.13.11"
   },
   "peerDependencies": {

diff --git a/packages/vue-query/src/devtools/devtools.ts b/packages/vue-query/src/devtools/devtools.ts
@@ -2,7 +2,7 @@
 
 import { setupDevtoolsPlugin } from '@vue/devtools-api'
 import type { CustomInspectorNode } from '@vue/devtools-api'
-import { matchSorter } from 'match-sorter'
+import { rankItem } from '@tanstack/match-sorter-utils'
 import type { Query } from '@tanstack/query-core'
 import type { QueryClient } from '../queryClient'
 import {
@@ -125,15 +125,20 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
 
       api.on.getInspectorTree((payload) => {
         if (payload.inspectorId === pluginId) {
-          const queries: Query[] = queryCache.getAll()
+          const queries = queryCache.getAll()
           const settings = api.getSettings()
-          const filtered = matchSorter(queries, payload.filter, {
-            keys: ['queryHash'],
-            baseSort: (a, b) =>
-              sortFns[settings.sortFn]!(a.item, b.item) * settings.baseSort,
-          })
 
-          const nodes: CustomInspectorNode[] = filtered.map((query) => {
+          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: CustomInspectorNode[] = sorted.map((query) => {
             const stateLabel = getQueryStateLabel(query)
 
             return {

diff --git a/packages/vue-query/src/devtools/utils.ts b/packages/vue-query/src/devtools/utils.ts
@@ -78,8 +78,7 @@ export function getQueryStatusBg(query: Query): number {
   return 0x008327
 }
 
-const queryHashSort: SortFn = (a, b) =>
-  String(a.queryHash).localeCompare(b.queryHash)
+const queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)
 
 const dateSort: SortFn = (a, b) =>
   a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1