@sv-use/core/dist/observe-resize/index.svelte.js

A collection of Svelte 5 utilities.

import { onDestroy } from 'svelte';
import { normalizeValue, toArray } from '../__internal__/utils.svelte.js';
import { isSupported } from '../__internal__/is.svelte.js';
import { defaultWindow } from '../__internal__/configurable.js';
export function observeResize(targets, callback, options = {}) {
    const { autoCleanup = true, window = defaultWindow, ...observerOptions } = options;
    let _observer;
    const _isSupported = isSupported(() => window !== undefined && 'ResizeObserver' in window);
    const _targets = $derived(toArray(targets).map(normalizeValue));
    $effect(() => {
        cleanup();
        if (_isSupported.current && window) {
            _observer = new ResizeObserver(callback);
            for (const el of _targets) {
                if (el) {
                    _observer.observe(el, observerOptions);
                }
            }
        }
    });
    if (autoCleanup) {
        onDestroy(() => {
            cleanup();
        });
    }
    function cleanup() {
        if (!_observer)
            return;
        _observer.disconnect();
        _observer = undefined;
    }
    return {
        get isSupported() {
            return _isSupported.current;
        },
        cleanup
    };
}