feat(useArrayUnique): add a custom function to deduplicate (#2612)

packages/shared/useArrayUnique/index.md

@@ -36,3 +36,21 @@ const result = useArrayUnique(list)
 list.push(1)
 // result.value: [1, 2, 3]
 ```
+
+### Use with custom function
+
+```js
+import { useArrayUnique } from '@vueuse/core'
+
+const list = reactive([
+  { id: 1, name: 'foo' },
+  { id: 2, name: 'bar' },
+  { id: 1, name: 'baz' },
+])
+
+const result = useArrayUnique(list, (a, b) => a.id === b.id)
+// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
+
+list.push({ id: 1, name: 'qux' })
+// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]
+```

packages/shared/useArrayUnique/index.test.ts

@@ -27,11 +27,21 @@ describe('useArrayUnique', () => {
     expect(result.value.length).toBe(3)
   })
 
-  it('should work with reactive array', () => {
-    const list = reactive([1, 2, 2, 3])
-    const result = useArrayUnique(list)
-    expect(result.value.length).toBe(3)
-    list.push(1)
-    expect(result.value.length).toBe(3)
+  it('should work with array of reactive and custom compare function', () => {
+    const list = reactive([
+      {
+        id: 1,
+        name: 'foo',
+      }, {
+        id: 2,
+        name: 'bar',
+      },
+      {
+        id: 1,
+        name: 'baz',
+      },
+    ])
+    const result = useArrayUnique(list, (a, b) => a.id === b.id)
+    expect(result.value.length).toBe(2)
   })
 })

packages/shared/useArrayUnique/index.ts

@@ -3,13 +3,32 @@ import { computed } from 'vue-demi'
 import type { MaybeComputedRef } from '../utils'
 import { resolveUnref } from '../resolveUnref'
 
+function uniq<T>(array: T[]) {
+  return Array.from(new Set(array))
+}
+
+function uniqueElementsBy<T>(
+  array: T[],
+  fn: (a: T, b: T, array: T[]) => boolean,
+) {
+  return array.reduce<T[]>((acc, v) => {
+    if (!acc.some(x => fn(v, x, array)))
+      acc.push(v)
+    return acc
+  }, [])
+}
+
 /**
  * reactive unique array
  * @see https://vueuse.org/useArrayUnique
  * @param {Array} list - the array was called upon.
+ * @param compareFn
  * @returns {Array} A computed ref that returns a unique array of items.
  */
 export function useArrayUnique<T>(
-  list: MaybeComputedRef<MaybeComputedRef<T>[]>): ComputedRef<T[]> {
-  return computed<T[]>(() => [...new Set<T>(resolveUnref(list).map(element => resolveUnref(element)))])
+  list: MaybeComputedRef<MaybeComputedRef<T>[]>, compareFn?: (a: T, b: T, array: T[]) => boolean): ComputedRef<T[]> {
+  return computed<T[]>(() => {
+    const resolvedList = resolveUnref(list).map(element => resolveUnref(element))
+    return compareFn ? uniqueElementsBy(resolvedList, compareFn) : uniq(resolvedList)
+  })
 }