framer-motion/dist/es/motion/utils/use-visual-element.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"use-visual-element.mjs","sources":["../../../../src/motion/utils/use-visual-element.ts"],"sourcesContent":["\"use client\"\n\nimport {\n    optimizedAppearDataAttribute,\n    type HTMLRenderState,\n    type SVGRenderState,\n    type VisualElement,\n} from \"motion-dom\"\nimport * as React from \"react\"\nimport { useContext, useEffect, useInsertionEffect, useRef } from \"react\"\nimport { LazyContext } from \"../../context/LazyContext\"\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { MotionContext } from \"../../context/MotionContext\"\nimport { PresenceContext } from \"../../context/PresenceContext\"\nimport { SwitchLayoutGroupContext } from \"../../context/SwitchLayoutGroupContext\"\nimport { MotionProps } from \"../../motion/types\"\nimport { DOMMotionComponents } from \"../../render/dom/types\"\nimport { CreateVisualElement } from \"../../render/types\"\nimport { useIsomorphicLayoutEffect } from \"../../utils/use-isomorphic-effect\"\nimport { VisualState } from \"./use-visual-state\"\n\nexport function useVisualElement<\n    Props,\n    TagName extends keyof DOMMotionComponents | string\n>(\n    Component: TagName | string | React.ComponentType<Props>,\n    visualState:\n        | VisualState<SVGElement, SVGRenderState>\n        | VisualState<HTMLElement, HTMLRenderState>,\n    props: MotionProps & Partial<MotionConfigContext>,\n    createVisualElement?: CreateVisualElement<Props, TagName>,\n    ProjectionNodeConstructor?: any,\n    isSVG?: boolean\n): VisualElement<HTMLElement | SVGElement> | undefined {\n    const { visualElement: parent } = useContext(MotionContext)\n    const lazyContext = useContext(LazyContext)\n    const presenceContext = useContext(PresenceContext)\n    const motionConfig = useContext(MotionConfigContext)\n    const reducedMotionConfig = motionConfig.reducedMotion\n    const skipAnimations = motionConfig.skipAnimations\n\n    const visualElementRef = useRef<VisualElement<\n        HTMLElement | SVGElement\n    > | null>(null)\n\n    /**\n     * Track whether the component has been through React's commit phase.\n     * Used to detect when LazyMotion features load after the component has mounted.\n     */\n    const hasMountedOnce = useRef(false)\n\n    /**\n     * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n     */\n    createVisualElement =\n        createVisualElement ||\n        (lazyContext.renderer as CreateVisualElement<Props, TagName>)\n\n    if (!visualElementRef.current && createVisualElement) {\n        visualElementRef.current = createVisualElement(Component, {\n            visualState,\n            parent,\n            props,\n            presenceContext,\n            blockInitialAnimation: presenceContext\n                ? presenceContext.initial === false\n                : false,\n            reducedMotionConfig,\n            skipAnimations,\n            isSVG,\n        })\n\n        /**\n         * If the component has already mounted before features loaded (e.g. via\n         * LazyMotion with async feature loading), we need to force the initial\n         * animation to run. Otherwise state changes that occurred before features\n         * loaded will be lost and the element will snap to its final state.\n         */\n        if (hasMountedOnce.current && visualElementRef.current) {\n            visualElementRef.current.manuallyAnimateOnMount = true\n        }\n    }\n\n    const visualElement = visualElementRef.current\n\n    /**\n     * Load Motion gesture and animation features. These are rendered as renderless\n     * components so each feature can optionally make use of React lifecycle methods.\n     */\n    const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext)\n\n    if (\n        visualElement &&\n        !visualElement.projection &&\n        ProjectionNodeConstructor &&\n        (visualElement.type === \"html\" || visualElement.type === \"svg\")\n    ) {\n        /**\n         * Classes built by createProjectionNode set up their node from the\n         * component's props, so components only bundle the setup with the\n         * layout and drag features.\n         */\n        ProjectionNodeConstructor.create(\n            visualElement,\n            props,\n            initialLayoutGroupConfig\n        )\n    }\n\n    useInsertionEffect(() => {\n        /**\n         * Skip the update if the visual element was created with these props.\n         * This isn't gated on the layout effect below having run, as a hidden\n         * <Activity> runs insertion effects but not layout effects, and\n         * props from renders made while hidden must still reach the element.\n         */\n        if (visualElement && visualElement.props !== props) {\n            visualElement.update(props, presenceContext)\n        }\n    })\n\n    /**\n     * Cache this value as we want to know whether HandoffAppearAnimations\n     * was present on initial render - it will be deleted after this.\n     */\n    const optimisedAppearId =\n        props[optimizedAppearDataAttribute as keyof typeof props]\n    const wantsHandoff = useRef(\n        Boolean(optimisedAppearId) &&\n            typeof window !== \"undefined\" &&\n            !window.MotionHandoffIsComplete?.(optimisedAppearId) &&\n            window.MotionHasOptimisedAnimation?.(optimisedAppearId)\n    )\n\n    /**\n     * Layout effects re-run when a hidden Suspense/Activity boundary is\n     * revealed, but passive effects only re-run if this component re-renders\n     * (not the case for memoized elements). Replay animations on every\n     * reconnection. Must be declared before the effect that sets hasMountedOnce.\n     */\n    useIsomorphicLayoutEffect(() => {\n        if (!hasMountedOnce.current || !visualElement) return\n\n        visualElement.animationState?.animateChanges()\n        visualElement.enteringChildren = undefined\n    }, [])\n\n    useIsomorphicLayoutEffect(() => {\n        /**\n         * Track that this component has mounted. This is used to detect when\n         * LazyMotion features load after the component has already committed.\n         */\n        hasMountedOnce.current = true\n\n        if (!visualElement) return\n\n        window.MotionIsMounted = true\n\n        visualElement.updateFeatures()\n        visualElement.scheduleRenderMicrotask()\n\n        /**\n         * Ideally this function would always run in a useEffect.\n         *\n         * However, if we have optimised appear animations to handoff from,\n         * it needs to happen synchronously to ensure there's no flash of\n         * incorrect styles in the event of a hydration error.\n         *\n         * So if we detect a situation where optimised appear animations\n         * are running, we use useLayoutEffect to trigger animations.\n         */\n        if (wantsHandoff.current && visualElement.animationState) {\n            visualElement.animationState.animateChanges()\n        }\n    })\n\n    useEffect(() => {\n        if (!visualElement) return\n\n        if (!wantsHandoff.current && visualElement.animationState) {\n            visualElement.animationState.animateChanges()\n        }\n\n        if (wantsHandoff.current) {\n            // This ensures all future calls to animateChanges() in this component will run in useEffect\n            queueMicrotask(() => {\n                window.MotionHandoffMarkAsComplete?.(optimisedAppearId)\n            })\n\n            wantsHandoff.current = false\n        }\n\n        /**\n         * Now we've finished triggering animations for this element we\n         * can wipe the enteringChildren set for the next render.\n         */\n        visualElement.enteringChildren = undefined\n    })\n\n    return visualElement!\n}\n"],"names":[],"mappings":";;;;;;;;;;AAqBM;;AAcF;AACA;AACA;AACA;AACA;AAEA;AAIA;;;AAGG;AACH;AAEA;;AAEG;;;;AAKH;AACI;;;;;AAKI;AACI;AACA;;;;AAIP;AAED;;;;;AAKG;;AAEC;;;AAIR;AAEA;;;AAGG;AACH;AAEA;;;AAII;AAEA;;;;AAIG;;;;AASH;;;;;AAKG;;AAEC;;AAER;AAEA;;;AAGG;AACH;AAEA;;AAGQ;AACA;AAGR;;;;;AAKG;;AAEC;;AAEA;AACA;;;AAIA;;;AAGG;AACH;AAEA;;AAEA;;;AAKA;;;;;;;;;AASG;;AAEC;;AAER;;AAGI;;;AAGI;;AAGJ;;;AAGQ;AACJ;AAEA;;AAGJ;;;AAGG;AACH;AACJ;AAEA;AACJ;;"}