All files / src/motion/features use-features.tsx

100% Statements 23/23
100% Branches 11/11
100% Functions 1/1
100% Lines 19/19

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 6533x       33x 33x 33x 33x   33x 33x         33x         1358x 1358x   1358x           1350x         2x           1348x 12132x 12132x                 12132x 1568x                   1348x    
import * as React from "react"
import { VisualElement } from "../../render/types"
import { MotionProps } from "../types"
import { FeatureBundle, FeatureDefinition } from "./types"
import { featureDefinitions } from "./definitions"
import { invariant } from "hey-listen"
import { useContext } from "react"
import { LazyContext } from "../../context/LazyContext"
 
const featureNames = Object.keys(featureDefinitions)
const numFeatures = featureNames.length
 
/**
 * Load features via renderless components based on the provided MotionProps.
 */
export function useFeatures(
    props: MotionProps,
    visualElement?: VisualElement,
    preloadedFeatures?: FeatureBundle
): null | JSX.Element[] {
    const features: JSX.Element[] = []
    const lazyContext = useContext(LazyContext)
 
    if (!visualElement) return null
 
    /**
     * If we're in development mode, check to make sure we're not rendering a motion component
     * as a child of LazyMotion, as this will break the file-size benefits of using it.
     */
    if (
        process.env.NODE_ENV !== "production" &&
        preloadedFeatures &&
        lazyContext.strict
    ) {
        invariant(
            false,
            "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead."
        )
    }
 
    for (let i = 0; i < numFeatures; i++) {
        const name = featureNames[i]
        const { isEnabled, Component } = featureDefinitions[
            name
        ] as FeatureDefinition
 
        /**
         * It might be possible in the future to use this moment to
         * dynamically request functionality. In initial tests this
         * was producing a lot of duplication amongst bundles.
         */
        if (isEnabled(props) && Component) {
            features.push(
                <Component
                    key={name}
                    {...props}
                    visualElement={visualElement}
                />
            )
        }
    }
 
    return features
}