@humanspeak/svelte-motion/dist/utils/dom.js

Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus, in-view), variants, FLIP layout animations, shared-layout transitions, spring physics, and scroll-linked motion values

/**
 * @fileoverview DOM utilities.
 * @module utils/dom
 */
/**
 * Type guard for DOM elements that is resilient across realms/iframes.
 *
 * Avoids relying on `instanceof HTMLElement`, which can fail when elements
 * originate from a different realm (e.g., an iframe). Instead, checks for
 * the presence of a callable `getBoundingClientRect`, which is available on
 * all `Element` nodes.
 *
 * @param v Unknown value to test.
 * @return Whether the value is a DOM `Element`.
 */
export const isDomElement = (v) => {
    return !!v && typeof v.getBoundingClientRect === 'function';
};
/**
 * Resolves an `ElementOrGetter` to an `HTMLElement`, or `undefined` if not
 * yet available (e.g. a getter is supplied but the bound element hasn't
 * mounted).
 *
 * Coerces a `null` getter result to `undefined` so the common
 * `let el: HTMLElement | null = null` `bind:this` pattern lines up with the
 * declared return type.
 *
 * @param ref Element or getter to resolve.
 * @returns The resolved element, or `undefined` when not yet available.
 * @example
 * ```ts
 * let node: HTMLElement | null = null
 * resolveElement(() => node) // => undefined until bind:this fires
 * ```
 */
export const resolveElement = (ref) => {
    if (!ref)
        return undefined;
    const value = typeof ref === 'function' ? ref() : ref;
    return value ?? undefined;
};
/**
 * Tests whether an `ElementOrGetter` is currently unresolved — defined as a
 * getter that returns falsy. Direct element refs are never "pending" (they
 * were already resolved at call time) and absent refs are not "pending"
 * either (they're just absent).
 *
 * Lets microtask-defer / rAF-defer loops wait for refs to hydrate after
 * `bind:this` settles on mount.
 *
 * @param ref Element or getter to check.
 * @returns `true` only when `ref` is a getter and the getter currently returns falsy.
 */
export const isRefPending = (ref) => {
    if (!ref)
        return false;
    if (typeof ref !== 'function')
        return false;
    return !ref();
};