@stacksjs/stx/dist/composables/use-mutation-observer.d.ts

A performant UI Framework. Powered by Bun.

/**
 * Check if MutationObserver is supported
 */
export declare function isMutationObserverSupported(): boolean;
/**
 * Create a reactive mutation observer
 *
 * @example
 * ```ts
 * const observer = useMutationObserver({
 *   attributes: true,
 *   childList: true,
 *   onMutate: (mutations) => {
 *     mutations.forEach(m => console.log('Mutation:', m.type))
 *   }
 * })
 *
 * // Start observing an element
 * observer.observe(document.getElementById('my-element'))
 *
 * // Subscribe to state changes
 * observer.subscribe((state) => {
 *   console.log('Latest mutations:', state.mutations)
 * })
 *
 * // Stop observing
 * observer.disconnect()
 * ```
 */
export declare function useMutationObserver(options?: MutationObserverOptions): MutationObserverRef;
/**
 * Watch for attribute changes on an element
 *
 * @example
 * ```ts
 * useAttributeObserver(
 *   document.getElementById('my-element'),
 *   ['class', 'data-state'],
 *   (attr, oldValue, newValue) => {
 *     console.log(`${attr} changed from ${oldValue} to ${newValue}`)
 *   }
 * )
 * ```
 */
export declare function useAttributeObserver(target: Element | null, attributeNames: string[], callback: (attributeName: string, oldValue: string | null, newValue: string | null) => void): () => void;
/**
 * Watch for child node changes
 *
 * @example
 * ```ts
 * useChildListObserver(
 *   document.getElementById('container'),
 *   (added, removed) => {
 *     console.log('Added:', added.length, 'Removed:', removed.length)
 *   }
 * )
 * ```
 */
export declare function useChildListObserver(target: Element | null, callback: (added: Node[], removed: Node[]) => void, options?: { subtree?: boolean }): () => void;
/**
 * Watch for text content changes
 *
 * @example
 * ```ts
 * useTextObserver(
 *   document.getElementById('editable'),
 *   (oldText, newText) => {
 *     console.log(`Text changed from "${oldText}" to "${newText}"`)
 *   }
 * )
 * ```
 */
export declare function useTextObserver(target: Element | null, callback: (oldText: string | null, newText: string) => void): () => void;
/**
 * Mutation Observer Composables
 *
 * Reactive utilities for observing DOM mutations.
 */
export declare interface MutationObserverState {
  isSupported: boolean
  isObserving: boolean
  mutations: MutationRecord[]
}
export declare interface MutationObserverOptions {
  attributes?: boolean
  attributeFilter?: string[]
  attributeOldValue?: boolean
  characterData?: boolean
  characterDataOldValue?: boolean
  childList?: boolean
  subtree?: boolean
  onMutate?: (mutations: MutationRecord[]) => void
}
export declare interface MutationObserverRef {
  get: () => MutationObserverState
  subscribe: (fn: (state: MutationObserverState) => void) => () => void
  observe: (target: Element | null) => void
  disconnect: () => void
  takeRecords: () => MutationRecord[]
  isSupported: () => boolean
}