maz-ui/dist/composables/useMutationObserver.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import{computed,onMounted,ref,toValue,watch}from"vue";import{truthyFilter}from"@maz-ui/utils/helpers/truthyFilter";import{isClient}from"@maz-ui/utils/helpers/isClient";function useMutationObserver(target,callback,options={}){let{internalWindow=isClient()?globalThis:void 0,...mutationOptions}=options;let observer;let isSupported=ref((internalWindow&&`MutationObserver`in internalWindow)??!1);isSupported.value||onMounted(()=>{isSupported.value=(internalWindow&&`MutationObserver`in internalWindow)??!1});let cleanup=()=>{observer&&=(observer.disconnect(),void 0)};let stopWatch=watch([computed(()=>{let value=toValue(target);let element;return value&&`$el`in value?element=value.$el:value&&(element=value),new Set([element].filter(truthyFilter))}),isSupported],([newTargets,isSupported])=>{cleanup(),isSupported&&newTargets.size&&(observer=new MutationObserver(callback),newTargets.forEach(el=>observer?.observe(el,mutationOptions)))},{immediate:!0,flush:`post`});return{isSupported,stop:()=>{stopWatch(),cleanup()},takeRecords:()=>observer?.takeRecords()}}export{useMutationObserver};