1 line
17 KiB
JSON
1 line
17 KiB
JSON
|
{"ast":null,"code":"import { microtask } from 'motion-dom';\nimport { useContext, useRef, useInsertionEffect, useEffect } from 'react';\nimport { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';\nimport { LazyContext } from '../../context/LazyContext.mjs';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext.mjs';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nfunction useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {\n var _window$MotionHandoff, _window, _window$MotionHasOpti, _window2;\n const {\n visualElement: parent\n } = useContext(MotionContext);\n const lazyContext = useContext(LazyContext);\n const presenceContext = useContext(PresenceContext);\n const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;\n const visualElementRef = useRef(null);\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n createVisualElement = createVisualElement || lazyContext.renderer;\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState,\n parent,\n props,\n presenceContext,\n blockInitialAnimation: presenceContext ? presenceContext.initial === false : false,\n reducedMotionConfig\n });\n }\n const visualElement = visualElementRef.current;\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 if (visualElement && !visualElement.projection && ProjectionNodeConstructor && (visualElement.type === \"html\" || visualElement.type === \"svg\")) {\n createProjectionNode(visualElementRef.current, props, ProjectionNodeConstructor, initialLayoutGroupConfig);\n }\n const isMounted = useRef(false);\n useInsertionEffect(() => {\n /**\n * Check the component has already mounted before calling\n * `update` unnecessarily. This ensures we skip the initial update.\n */\n if (visualElement && isMounted.current) {\n visualElement.update(props, presenceContext);\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 = props[optimizedAppearDataAttribute];\n const wantsHandoff = useRef(Boolean(optimisedAppearId) && !((_window$MotionHandoff = (_window = window).MotionHandoffIsComplete) !== null && _window$MotionHandoff !== void 0 && _window$MotionHandoff.call(_window, optimisedAppearId)) && ((_window$MotionHasOpti = (_window2 = window).MotionHasOptimisedAnimation) === null || _window$MotionHasOpti === void 0 ? void 0 : _window$MotionHasOpti.call(_window2, optimisedAppearId)));\n useIsomorphicLayoutEffect(() => {\n if (!visualElement) return;\n isMounted.current = true;\n window.MotionIsMounted = true;\n visualElement.updateFeatures();\n microtask.render(visualElement.render);\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 situtation 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 useEffect(() => {\n
|