@humanspeak/svelte-motion/dist/utils/motionValueChild.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

import { isMotionValue } from 'motion-dom';
/**
 * Checks whether a value is a renderable MotionValue child.
 *
 * @param value Value to inspect.
 * @returns Whether the value is a `MotionValue<number | string>`.
 *
 * @example
 * ```ts
 * const count = motionValue(0)
 * isMotionValueChild(count) // true
 * isMotionValueChild('0') // false
 * ```
 */
export const isMotionValueChild = (value) => {
    return isMotionValue(value);
};
/**
 * Reads the initial text for a MotionValue child.
 *
 * @param child MotionValue child to sample.
 * @returns String form of the child's current value.
 *
 * @example
 * ```ts
 * const status = motionValue('ready')
 * renderMotionValueChild(status) // 'ready'
 * ```
 */
export const renderMotionValueChild = (child) => `${child.get()}`;
/**
 * Subscribes a DOM element's text to a MotionValue child.
 *
 * @param child MotionValue child to observe.
 * @param element Element whose `textContent` should mirror the child.
 * @param onRender Optional callback fired with every rendered text value.
 * @returns Unsubscribe callback.
 *
 * @example
 * ```ts
 * const count = motionValue(0)
 * const element = document.createElement('span')
 * const unsubscribe = bindMotionValueChild(count, element)
 *
 * count.set(1)
 * element.textContent // '1'
 * unsubscribe()
 * ```
 */
export const bindMotionValueChild = (child, element, onRender) => {
    return child.on('change', (latest) => {
        const text = `${latest}`;
        onRender?.(text);
        element.textContent = text;
    });
};