⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	11
📊 Variables & Constants	1
📐 Interfaces	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/onElementRemoval/index.ts

📦 Imports

Name	Source
Fn	@vueuse/shared
WatchOptionsBase	vue
ConfigurableDocumentOrShadowRoot	../_configurable
ConfigurableWindow	../_configurable
MaybeElementRef	../unrefElement
noop	@vueuse/shared
tryOnScopeDispose	@vueuse/shared
watchEffect	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useMutationObserver	../useMutationObserver

---

Variables & Constants

Name	Type	Kind	Value	Exported
stopFn	Fn | undefined	let/var	*not shown*	✗

---

Functions

onElementRemoval(target: MaybeElementRef, callback: (mutationRecords: MutationRecord[]) => void, options: OnElementRemovalOptions): Fn

Code

export function onElementRemoval(
  target: MaybeElementRef,
  callback: (mutationRecords: MutationRecord[]) => void,
  options: OnElementRemovalOptions = {},
): Fn {
  const {
    window = defaultWindow,
    document = window?.document,
    flush = 'sync',
  } = options

  // SSR
  if (!window || !document)
    return noop

  let stopFn: Fn | undefined
  const cleanupAndUpdate = (fn?: Fn) => {
    stopFn?.()
    stopFn = fn
  }

  const stopWatch = watchEffect(() => {
    const el = unrefElement(target)
    if (el) {
      const { stop } = useMutationObserver(
        document as any,
        (mutationsList) => {
          const targetRemoved = mutationsList
            .map(mutation => [...mutation.removedNodes])
            .flat()
            .some(node => node === el || node.contains(el))

          if (targetRemoved) {
            callback(mutationsList)
          }
        },
        {
          window,
          childList: true,
          subtree: true,
        },
      )

      cleanupAndUpdate(stop)
    }
  }, { flush })

  const stopHandle = () => {
    stopWatch()
    cleanupAndUpdate()
  }

  tryOnScopeDispose(stopHandle)

  return stopHandle
}

• JSDoc:

  /**
   * Fires when the element or any element containing it is removed.
   *
   * @param target
   * @param callback
   * @param options
   */
  

• Parameters:

• target: MaybeElementRef
• callback: (mutationRecords: MutationRecord[]) => void
• options: OnElementRemovalOptions
• Return Type: Fn
• Calls:
• stopFn
• watchEffect (from vue)
• unrefElement (from ../unrefElement)
• useMutationObserver (from ../useMutationObserver)
• mutationsList .map(mutation => [...mutation.removedNodes]) .flat() .some
• node.contains
• callback
• cleanupAndUpdate
• stopWatch
• tryOnScopeDispose (from @vueuse/shared)
• Internal Comments:

  // SSR
  

cleanupAndUpdate(fn: Fn): void

Code

(fn?: Fn) => {
    stopFn?.()
    stopFn = fn
  }

• Parameters:
• fn: Fn
• Return Type: void
• Calls:
• stopFn

stopHandle(): void

Code

() => {
    stopWatch()
    cleanupAndUpdate()
  }

• Return Type: void
• Calls:
• stopWatch
• cleanupAndUpdate

---

Interfaces

OnElementRemovalOptions

Interface Code

export interface OnElementRemovalOptions
  extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot, WatchOptionsBase { }

---