⬅️ Back to Table of Contents

📄 onElementRemoval

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	11
📐 Interfaces	1

📚 Table of Contents

• Imports
• 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

---

Functions

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

Fires when the element or any element containing it is removed.

Parameters:

• target any: No description
• callback any: No description
• options any: No description

Raw JSDoc

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

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

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
}

Internal helpers

Declared inside another function in this file.

cleanupAndUpdate(fn: Fn): void

Parameters:

• fn Fn

Returns: void

Calls:

• stopFn

Code

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

stopHandle(): void

Returns: void

Calls:

• stopWatch
• cleanupAndUpdate

Code

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

---

Interfaces

OnElementRemovalOptions

Interface Code

export interface OnElementRemovalOptions
  extends ConfigurableWindow, ConfigurableDocumentOrShadowRoot, WatchOptionsBase { }

---

Generated by Syntax Scribe