feat(useMutationObserver): add takeRecords function (#3480)

vueuse · Nov 9, 2023 · f9136e8 · f9136e8
1 parent 038666b
commit f9136e8
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/packages/core/useMutationObserver/index.test.ts b/packages/core/useMutationObserver/index.test.ts
@@ -166,4 +166,25 @@ describe('useMutationObserver', () => {
     await promiseTimeout(10)
     expect(cb).toHaveBeenCalledTimes(1)
   })
+
+  it('should work with takeRecords', async () => {
+    const target = document.createElement('div')
+    const cb = vi.fn()
+
+    const { takeRecords } = useMutationObserver(target, cb, {
+      attributes: true,
+    })
+
+    target.setAttribute('id', 'footer')
+    await promiseTimeout(10)
+    expect(cb).toHaveBeenCalledTimes(1)
+
+    target.setAttribute('id', 'header')
+    const records = takeRecords()
+
+    await promiseTimeout(10)
+    expect(records).toHaveLength(1)
+    expect(records![0].target).toBe(target)
+    expect(cb).toHaveBeenCalledTimes(1)
+  })
 })
diff --git a/packages/core/useMutationObserver/index.ts b/packages/core/useMutationObserver/index.ts
@@ -46,6 +46,10 @@ export function useMutationObserver(
     { immediate: true },
   )
 
+  const takeRecords = () => {
+    return observer?.takeRecords()
+  }
+
   const stop = () => {
     cleanup()
     stopWatch()
@@ -56,6 +60,7 @@ export function useMutationObserver(
   return {
     isSupported,
     stop,
+    takeRecords,
   }
 }