All files / src/render/dom motion.ts

100% Statements 14/14
100% Branches 0/0
100% Functions 2/2
100% Lines 14/14

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65  33x 33x 33x 33x 33x 33x 33x 33x 33x     33x                         33x   57x                                               33x     2x                    
import { DOMMotionComponents } from "./types"
import { createMotionComponent } from "../../motion"
import { createMotionProxy } from "./motion-proxy"
import { createDomMotionConfig } from "./utils/create-config"
import { gestureAnimations } from "../../motion/features/gestures"
import { animations } from "../../motion/features/animations"
import { drag } from "../../motion/features/drag"
import { createDomVisualElement } from "./create-visual-element"
import { layoutFeatures } from "../../motion/features/layout"
import { HTMLProjectionNode } from "../../projection/node/HTMLProjectionNode"
import { FeatureBundle } from "../../motion/features/types"
 
const featureBundle: Partial<FeatureBundle> = {
    ...animations,
    ...gestureAnimations,
    ...drag,
    ...layoutFeatures,
}
 
/**
 * HTML & SVG components, optimised for use with gestures and animation. These can be used as
 * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
 *
 * @public
 */
export const motion = /*@__PURE__*/ createMotionProxy(
    (Component, config) =>
        createDomMotionConfig(
            Component,
            config,
            featureBundle,
            createDomVisualElement,
            HTMLProjectionNode
        ) as any
)
 
/**
 * Create a DOM `motion` component with the provided string. This is primarily intended
 * as a full alternative to `motion` for consumers who have to support environments that don't
 * support `Proxy`.
 *
 * ```javascript
 * import { createDomMotionComponent } from "framer-motion"
 *
 * const motion = {
 *   div: createDomMotionComponent('div')
 * }
 * ```
 *
 * @public
 */
export function createDomMotionComponent<T extends keyof DOMMotionComponents>(
    key: T
) {
    return createMotionComponent(
        createDomMotionConfig(
            key,
            { forwardMotionProps: false },
            featureBundle,
            createDomVisualElement,
            HTMLProjectionNode
        ) as any
    ) as DOMMotionComponents[T]
}