Moving contexts to top level

src/components/AnimateSharedLayout/index.tsx

@@ -7,10 +7,7 @@ import {
     SyncLayoutLifecycles,
     SharedLayoutContext,
 } from "./SharedLayoutContext"
-import {
-    MotionContext,
-    MotionContextProps,
-} from "../../motion/context/MotionContext"
+import { MotionContext, MotionContextProps } from "../../context/MotionContext"
 import { resetRotate } from "./utils/rotate"
 import { VisualElement } from "../../render/types"
 

src/motion/context/MotionConfigContext.tsx → src/context/MotionConfigContext.tsx

@@ -1,8 +1,8 @@
 import * as React from "react"
 import { createContext, useContext, useMemo } from "react"
-import { MotionFeature } from "../features/types"
-import { TransformPoint2D } from "../../types/geometry"
-import { Transition } from "../../types"
+import { MotionFeature } from "../motion/features/types"
+import { Transition } from "../types"
+import { TransformPoint2D } from "../types/geometry"
 
 /**
  * @public

src/motion/context/__tests__/MotionContext.test.ts → src/context/MotionContext/__tests__/utils.test.ts

@@ -1,5 +1,5 @@
 import { animationControls } from "../../../animation/animation-controls"
-import { getCurrentTreeVariants } from "../MotionContext"
+import { getCurrentTreeVariants } from "../utils"
 
 describe("getCurrentTreeVariants", () => {
     test("It returns the correct variant to render currently", () => {

src/context/MotionContext/create.ts

@@ -0,0 +1,33 @@
+import { useContext, useMemo } from "react"
+import { MotionContext, MotionContextProps } from "."
+import { MotionProps } from "../../motion/types"
+import { getCurrentTreeVariants } from "./utils"
+
+export function useCreateMotionContext(
+    props: MotionProps,
+    isStatic: boolean
+): MotionContextProps {
+    const { initial, animate } = getCurrentTreeVariants(
+        props,
+        useContext(MotionContext)
+    )
+
+    return useMemo(
+        () => ({ initial, animate }),
+        /**
+         * Only break memoisation in static mode
+         */
+        isStatic
+            ? [
+                  variantLabelsAsDependency(initial),
+                  variantLabelsAsDependency(animate),
+              ]
+            : []
+    )
+}
+
+function variantLabelsAsDependency(
+    prop: undefined | string | string[] | boolean
+) {
+    return Array.isArray(prop) ? prop.join(" ") : prop
+}

src/context/MotionContext/index.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react"
+import { VisualElement } from "../../render/types"
+
+export interface MotionContextProps {
+    visualElement?: VisualElement
+    initial?: false | string | string[]
+    animate?: string | string[]
+}
+
+export const MotionContext = createContext<MotionContextProps>({})
+
+export function useVisualElementContext() {
+    return useContext(MotionContext).visualElement
+}

src/context/MotionContext/utils.ts

@@ -0,0 +1,23 @@
+import { MotionContextProps } from "."
+import { MotionProps } from "../../motion/types"
+import {
+    checkIfControllingVariants,
+    isVariantLabel,
+} from "../../render/utils/variants"
+
+export function getCurrentTreeVariants(
+    props: MotionProps,
+    context: MotionContextProps
+): MotionContextProps {
+    if (checkIfControllingVariants(props)) {
+        const { initial, animate } = props
+        return {
+            initial:
+                initial === false || isVariantLabel(initial)
+                    ? (initial as any)
+                    : undefined,
+            animate: isVariantLabel(animate) ? animate : undefined,
+        }
+    }
+    return props.inherit !== false ? context : {}
+}

src/gestures/drag/__tests__/utils.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import sync from "framesync"
-import { MotionConfig } from "../../../motion/context/MotionConfigContext"
+import { MotionConfig } from "../../../context/MotionConfigContext"
 import { act } from "react-dom/test-utils"
 import { fireEvent } from "@testing-library/dom"
 
@@ -15,7 +15,7 @@ const pos: Point = {
 }
 
 export const frame = {
-    postRender: () => new Promise(resolve => sync.postRender(resolve)),
+    postRender: () => new Promise((resolve) => sync.postRender(resolve)),
 }
 
 type Deferred<T> = {
@@ -25,7 +25,7 @@ type Deferred<T> = {
 
 export function deferred<T>(): Deferred<T> {
     const def = {} as Deferred<T>
-    def.promise = new Promise(resolve => {
+    def.promise = new Promise((resolve) => {
         def.resolve = resolve as any
     })
     return def
@@ -57,7 +57,7 @@ export const drag = (element: any, triggerElement?: any) => {
 }
 
 export const sleep = (ms: number) =>
-    new Promise(resolve => setTimeout(resolve, ms))
+    new Promise((resolve) => setTimeout(resolve, ms))
 
 export const MockDrag = ({ children }: { children: React.ReactNode }) => (
     <MotionConfig transformPagePoint={() => pos}>{children}</MotionConfig>

src/gestures/drag/use-drag.ts

@@ -1,5 +1,5 @@
 import { useEffect, useContext } from "react"
-import { MotionConfigContext } from "../../motion/context/MotionConfigContext"
+import { MotionConfigContext } from "../../context/MotionConfigContext"
 import { DraggableProps } from "./types"
 import { VisualElementDragControls } from "./VisualElementDragControls"
 import { useConstant } from "../../utils/use-constant"

src/gestures/use-pan-gesture.ts

@@ -1,6 +1,6 @@
 import { RefObject, useRef, useContext, useEffect } from "react"
 import { EventInfo } from "../events/types"
-import { MotionConfigContext } from "../motion/context/MotionConfigContext"
+import { MotionConfigContext } from "../context/MotionConfigContext"
 import { useUnmountEffect } from "../utils/use-unmount-effect"
 import { usePointerEvent } from "../events/use-pointer-event"
 import { PanSession, PanInfo, AnyPointerEvent } from "./PanSession"

src/index.ts

@@ -80,7 +80,7 @@ export { VisualElement } from "./render/types"
 export {
     MotionConfig,
     MotionConfigContext,
-} from "./motion/context/MotionConfigContext"
+} from "./context/MotionConfigContext"
 export { PresenceContext } from "./components/AnimatePresence/PresenceContext"
 export { LayoutGroupContext } from "./components/AnimateSharedLayout/LayoutGroupContext"
 

src/motion/features/use-features.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { useContext } from "react"
-import { MotionConfigContext } from "../context/MotionConfigContext"
+import { MotionConfigContext } from "../../context/MotionConfigContext"
 import { VisualElement } from "../../render/types"
 import { MotionProps } from ".."
 import { MotionFeature } from "./types"

src/motion/index.tsx

@@ -3,12 +3,13 @@ import { forwardRef, useContext } from "react"
 import { MotionProps } from "./types"
 import { RenderComponent, MotionFeature } from "./features/types"
 import { useFeatures } from "./features/use-features"
-import { MotionConfigContext } from "./context/MotionConfigContext"
-import { MotionContext, useCreateMotionContext } from "./context/MotionContext"
+import { MotionConfigContext } from "../context/MotionConfigContext"
+import { MotionContext } from "../context/MotionContext"
 import { CreateVisualElement } from "../render/types"
 import { useVisualElement } from "./utils/use-visual-element"
 import { UseVisualState } from "./utils/use-visual-state"
 import { useMotionRef } from "./utils/use-motion-ref"
+import { useCreateMotionContext } from "../context/MotionContext/create"
 export { MotionProps }
 
 export interface MotionComponentConfig<Instance, RenderState> {

src/motion/utils/use-visual-element.ts

@@ -3,12 +3,12 @@ import { PresenceContext } from "../../components/AnimatePresence/PresenceContex
 import { isPresent } from "../../components/AnimatePresence/use-presence"
 import { LayoutGroupContext } from "../../components/AnimateSharedLayout/LayoutGroupContext"
 import { MotionProps } from "../../motion"
-import { useVisualElementContext } from "../../motion/context/MotionContext"
+import { useVisualElementContext } from "../../context/MotionContext"
 import { useSnapshotOnUnmount } from "../../motion/features/layout/use-snapshot-on-unmount"
 import { CreateVisualElement, VisualElement } from "../../render/types"
 import { useConstant } from "../../utils/use-constant"
 import { useIsomorphicLayoutEffect } from "../../utils/use-isomorphic-effect"
-import { MotionConfigContext } from "../context/MotionConfigContext"
+import { MotionConfigContext } from "../../context/MotionConfigContext"
 import { VisualState } from "./use-visual-state"
 
 function useLayoutId({ layoutId }: MotionProps) {

src/motion/utils/use-visual-state.ts

@@ -11,7 +11,7 @@ import {
 } from "../../render/utils/variants"
 import { useConstant } from "../../utils/use-constant"
 import { resolveMotionValue } from "../../value/utils/resolve-motion-value"
-import { MotionContext, MotionContextProps } from "../context/MotionContext"
+import { MotionContext, MotionContextProps } from "../../context/MotionContext"
 import { MotionProps } from "../types"
 
 export interface VisualState<Instance, RenderState> {

src/value/use-inverted-scale.ts

@@ -2,7 +2,7 @@ import { useTransform } from "../value/use-transform"
 import { MotionValue } from "./"
 import { invariant, warning } from "hey-listen"
 import { useMotionValue } from "./use-motion-value"
-import { useVisualElementContext } from "../motion/context/MotionContext"
+import { useVisualElementContext } from "../context/MotionContext"
 
 interface ScaleMotionValues {
     scaleX: MotionValue<number>

src/value/use-spring.ts

@@ -4,7 +4,7 @@ import { MotionValue } from "../value"
 import { isMotionValue } from "./utils/is-motion-value"
 import { useMotionValue } from "./use-motion-value"
 import { useOnChange } from "./use-on-change"
-import { MotionConfigContext } from "../motion/context/MotionConfigContext"
+import { MotionConfigContext } from "../context/MotionConfigContext"
 
 /**
  * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.