added support for the required mutation observe options

PrefectHQ · Sep 13, 2022 · 2ae13d7 · 2ae13d7
1 parent fb8b0a5
commit 2ae13d7
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/useComputedStyle/useComputedStyle.ts b/src/useComputedStyle/useComputedStyle.ts
@@ -13,7 +13,7 @@ export function useComputedStyle(element: Element | Ref<Element | undefined>): T
       Object.assign(style, window.getComputedStyle(element, null))
 
       mutationObserver.disconnect()
-      mutationObserver.observe(elementRef)
+      mutationObserver.observe(elementRef, { attributes: true })
       resizeObserver.disconnect()
       resizeObserver.observe(elementRef)
     }

diff --git a/src/useMutationObserver/README.md b/src/useMutationObserver/README.md
@@ -17,6 +17,7 @@ const observer = useMutationObserver(callback)
 | Name     | Type                        |
 |----------|-----------------------------|
 | callback | `MutationCallback` |
+| options | `MutationObserverInit` |
 
 ## Returns
 `UseMutationObserverResponse`
diff --git a/src/useMutationObserver/useMutationObserver.ts b/src/useMutationObserver/useMutationObserver.ts
@@ -1,21 +1,21 @@
 import { onMounted, onUnmounted, ref, Ref } from 'vue'
 
 export type UseMutationObserverResponse = {
-  observe: (element: Element | Ref<Element | undefined>) => void,
+  observe: (element: Element | Ref<Element | undefined>, options: MutationObserverInit) => void,
   disconnect: () => void,
-  check: (element: Element | Ref<Element | undefined>) => void,
+  check: (element: Element | Ref<Element | undefined>, options: MutationObserverInit) => void,
 }
 
 export function useMutationObserver(callback: MutationCallback): UseMutationObserverResponse {
 
   let mutationObserver: MutationObserver | null = null
 
-  const observe: UseMutationObserverResponse['observe'] = (element) => {
+  const observe: UseMutationObserverResponse['observe'] = (element, options) => {
     const elementRef = ref(element)
     const observer = getObserver()
 
     if (elementRef.value) {
-      observer.observe(elementRef.value)
+      observer.observe(elementRef.value, options)
     }
   }
 
@@ -25,15 +25,15 @@ export function useMutationObserver(callback: MutationCallback): UseMutationObse
     observer.disconnect()
   }
 
-  const check: UseMutationObserverResponse['check'] = (element) => {
+  const check: UseMutationObserverResponse['check'] = (element, options) => {
     const elementRef = ref(element)
     if (!elementRef.value) {
       return
     }
 
     const observer = new MutationObserver(callback)
 
-    observer.observe(elementRef.value)
+    observer.observe(elementRef.value, options)
 
     setTimeout(() => observer.disconnect(), 100)
   }