Skip to content

Commit

Permalink
Merge pull request #101 from PrefectHQ/mutation-observer-options
Browse files Browse the repository at this point in the history
chore: added support for the required mutation observe options
  • Loading branch information
stackoverfloweth authored Sep 13, 2022
2 parents fb8b0a5 + de374a2 commit f86707e
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 10 deletions.
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@prefecthq/vue-compositions",
"private": false,
"version": "0.1.45",
"version": "0.1.46",
"description": "A collection of reusable vue compositions.",
"main": "index.ts",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion src/useComputedStyle/useComputedStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}
Expand Down
1 change: 1 addition & 0 deletions src/useMutationObserver/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const observer = useMutationObserver(callback)
| Name | Type |
|----------|-----------------------------|
| callback | `MutationCallback` |
| options | `MutationObserverInit` |

## Returns
`UseMutationObserverResponse`
12 changes: 6 additions & 6 deletions src/useMutationObserver/useMutationObserver.ts
Original file line number Diff line number Diff line change
@@ -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)
}
}

Expand All @@ -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)
}
Expand Down

0 comments on commit f86707e

Please sign in to comment.