Latest

mattgperry · mattgperry · commit 8ea3e4c67494 · 2026-01-12T21:08:06.000+01:00
diff --git a/packages/framer-motion/src/context/PresenceContext.ts b/packages/framer-motion/src/context/PresenceContext.ts
@@ -1,19 +1,9 @@
 "use client"
 
 import { createContext } from "react"
-import { VariantLabels } from "../motion/types"
+import type { PresenceContextProps } from "motion-dom"
 
-/**
- * @public
- */
-export interface PresenceContextProps {
-    id: string
-    isPresent: boolean
-    register: (id: string | number) => () => void
-    onExitComplete?: (id: string | number) => void
-    initial?: false | VariantLabels
-    custom?: any
-}
+export type { PresenceContextProps }
 
 /**
  * @public
diff --git a/packages/framer-motion/src/motion/features/animation/index.ts b/packages/framer-motion/src/motion/features/animation/index.ts
@@ -2,24 +2,9 @@ import {
     createAnimationState,
     Feature,
     isAnimationControls,
-    animateVisualElement,
     type VisualElement,
 } from "motion-dom"
 
-/**
- * Creates the animate function that will be used by the animation state
- * to perform actual animations using framer-motion's animation system.
- */
-function makeAnimateFunction(visualElement: VisualElement) {
-    return (animations: Array<{ animation: any; options?: any }>) => {
-        return Promise.all(
-            animations.map(({ animation, options }) =>
-                animateVisualElement(visualElement, animation, options)
-            )
-        )
-    }
-}
-
 export class AnimationFeature extends Feature<unknown> {
     unmountControls?: () => void
 
@@ -30,7 +15,7 @@ export class AnimationFeature extends Feature<unknown> {
      */
     constructor(node: VisualElement) {
         super(node)
-        node.animationState ||= createAnimationState(node, makeAnimateFunction)
+        node.animationState ||= createAnimationState(node)
     }
 
     updateAnimationControlsSubscription() {
diff --git a/packages/framer-motion/src/motion/utils/is-forced-motion-value.ts b/packages/framer-motion/src/motion/utils/is-forced-motion-value.ts
diff --git a/packages/framer-motion/src/render/html/use-props.ts b/packages/framer-motion/src/render/html/use-props.ts
@@ -1,9 +1,8 @@
 "use client"
 
-import { AnyResolvedKeyframe, buildHTMLStyles, isMotionValue, MotionValue } from "motion-dom"
+import { AnyResolvedKeyframe, buildHTMLStyles, isForcedMotionValue, isMotionValue, MotionValue } from "motion-dom"
 import { HTMLProps, useMemo } from "react"
 import { MotionProps } from "../../motion/types"
-import { isForcedMotionValue } from "../../motion/utils/is-forced-motion-value"
 import { ResolvedValues } from "../types"
 import { createHtmlRenderState } from "./utils/create-render-state"
 
diff --git a/packages/framer-motion/src/render/html/utils/scrape-motion-values.ts b/packages/framer-motion/src/render/html/utils/scrape-motion-values.ts
@@ -1,26 +1,7 @@
-import { isMotionValue, type VisualElement } from "motion-dom"
-import { MotionProps, MotionStyle } from "../../../motion/types"
-import { isForcedMotionValue } from "../../../motion/utils/is-forced-motion-value"
+import {
+    scrapeHTMLMotionValuesFromProps,
+    type ScrapeMotionValuesFromProps,
+} from "motion-dom"
 
-export function scrapeMotionValuesFromProps(
-    props: MotionProps,
-    prevProps: MotionProps,
-    visualElement?: VisualElement
-) {
-    const { style } = props
-    const newValues: { [key: string]: any } = {}
-
-    for (const key in style) {
-        if (
-            isMotionValue(style[key as keyof MotionStyle]) ||
-            (prevProps.style &&
-                isMotionValue(prevProps.style[key as keyof MotionStyle])) ||
-            isForcedMotionValue(key, props) ||
-            visualElement?.getValue(key)?.liveStyle !== undefined
-        ) {
-            newValues[key] = style[key as keyof MotionStyle]
-        }
-    }
-
-    return newValues
-}
+export const scrapeMotionValuesFromProps =
+    scrapeHTMLMotionValuesFromProps as ScrapeMotionValuesFromProps
diff --git a/packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts b/packages/framer-motion/src/render/svg/utils/scrape-motion-values.ts
@@ -1,31 +1,7 @@
-import { isMotionValue, transformPropOrder, type VisualElement } from "motion-dom"
-import { MotionProps } from "../../../motion/types"
-import { scrapeMotionValuesFromProps as scrapeHTMLMotionValuesFromProps } from "../../html/utils/scrape-motion-values"
+import {
+    scrapeSVGMotionValuesFromProps,
+    type ScrapeMotionValuesFromProps,
+} from "motion-dom"
 
-export function scrapeMotionValuesFromProps(
-    props: MotionProps,
-    prevProps: MotionProps,
-    visualElement?: VisualElement
-) {
-    const newValues = scrapeHTMLMotionValuesFromProps(
-        props,
-        prevProps,
-        visualElement
-    )
-
-    for (const key in props) {
-        if (
-            isMotionValue(props[key as keyof typeof props]) ||
-            isMotionValue(prevProps[key as keyof typeof prevProps])
-        ) {
-            const targetKey =
-                transformPropOrder.indexOf(key) !== -1
-                    ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
-                    : key
-
-            newValues[targetKey] = props[key as keyof typeof props]
-        }
-    }
-
-    return newValues
-}
+export const scrapeMotionValuesFromProps =
+    scrapeSVGMotionValuesFromProps as ScrapeMotionValuesFromProps
diff --git a/packages/framer-motion/src/render/types.ts b/packages/framer-motion/src/render/types.ts
@@ -2,16 +2,19 @@ import {
     AnyResolvedKeyframe,
     MotionValue,
     ResolvedValues,
-    type AnimationDefinition,
     type VisualElement,
+    type VisualElementEventCallbacks,
+    type LayoutLifecycles,
+    type UseRenderState,
 } from "motion-dom"
-import type { Axis, Box } from "motion-utils"
 import { ReducedMotionConfig } from "../context/MotionConfigContext"
 import type { PresenceContextProps } from "../context/PresenceContext"
 import { MotionProps } from "../motion/types"
 import { VisualState } from "../motion/utils/use-visual-state"
 import { DOMMotionComponents } from "./dom/types"
 
+export type { VisualElementEventCallbacks, LayoutLifecycles, UseRenderState }
+
 export type ScrapeMotionValuesFromProps = (
     props: MotionProps,
     prevProps: MotionProps,
@@ -20,8 +23,6 @@ export type ScrapeMotionValuesFromProps = (
     [key: string]: MotionValue | AnyResolvedKeyframe
 }
 
-export type UseRenderState<RenderState = any> = () => RenderState
-
 export interface VisualElementOptions<Instance, RenderState = any> {
     visualState: VisualState<Instance, RenderState>
     parent?: VisualElement<unknown>
@@ -40,35 +41,6 @@ export interface VisualElementOptions<Instance, RenderState = any> {
 // Re-export ResolvedValues from motion-dom for backward compatibility
 export type { ResolvedValues }
 
-export interface VisualElementEventCallbacks {
-    BeforeLayoutMeasure: () => void
-    LayoutMeasure: (layout: Box, prevLayout?: Box) => void
-    LayoutUpdate: (layout: Axis, prevLayout: Axis) => void
-    Update: (latest: ResolvedValues) => void
-    AnimationStart: (definition: AnimationDefinition) => void
-    AnimationComplete: (definition: AnimationDefinition) => void
-    LayoutAnimationStart: () => void
-    LayoutAnimationComplete: () => void
-    SetAxisTarget: () => void
-    Unmount: () => void
-}
-
-export interface LayoutLifecycles {
-    onBeforeLayoutMeasure?(box: Box): void
-
-    onLayoutMeasure?(box: Box, prevBox: Box): void
-
-    /**
-     * @internal
-     */
-    onLayoutAnimationStart?(): void
-
-    /**
-     * @internal
-     */
-    onLayoutAnimationComplete?(): void
-}
-
 export type CreateVisualElement<
     Props = {},
     TagName extends keyof DOMMotionComponents | string = "div"
diff --git a/packages/motion-dom/src/index.ts b/packages/motion-dom/src/index.ts
@@ -220,11 +220,13 @@ export { mixValues } from "./projection/animation/mix-values"
 export { buildHTMLStyles } from "./render/html/utils/build-styles"
 export { buildTransform } from "./render/html/utils/build-transform"
 export { renderHTML } from "./render/html/utils/render"
+export { scrapeMotionValuesFromProps as scrapeHTMLMotionValuesFromProps } from "./render/html/utils/scrape-motion-values"
 export { buildSVGAttrs } from "./render/svg/utils/build-attrs"
 export { renderSVG } from "./render/svg/utils/render"
 export { buildSVGPath } from "./render/svg/utils/path"
 export { camelCaseAttributes } from "./render/svg/utils/camel-case-attrs"
 export { isSVGTag } from "./render/svg/utils/is-svg-tag"
+export { scrapeMotionValuesFromProps as scrapeSVGMotionValuesFromProps } from "./render/svg/utils/scrape-motion-values"
 export { camelToDash } from "./render/dom/utils/camel-to-dash"
 
 /**
diff --git a/packages/motion-dom/src/projection/animation/__tests__/mix-values.test.ts b/packages/motion-dom/src/projection/animation/__tests__/mix-values.test.ts
@@ -1,4 +1,4 @@
-import { mixValues } from "motion-dom"
+import { mixValues } from "../mix-values"
 
 describe("mixValues", () => {
     test("mixes borderRadius numbers", () => {
diff --git a/packages/motion-dom/src/projection/geometry/__tests__/conversion.test.ts b/packages/motion-dom/src/projection/geometry/__tests__/conversion.test.ts
@@ -1,4 +1,4 @@
-import { convertBoundingBoxToBox } from "motion-dom"
+import { convertBoundingBoxToBox } from "../conversion"
 
 describe("convertBoundingBoxToBox", () => {
     it("Correctly converts a bounding box into a box", () => {
diff --git a/packages/motion-dom/src/projection/geometry/__tests__/copy.test.ts b/packages/motion-dom/src/projection/geometry/__tests__/copy.test.ts
@@ -1,4 +1,5 @@
-import { copyBoxInto, createBox } from "motion-dom"
+import { copyBoxInto } from "../copy"
+import { createBox } from "../models"
 
 describe("copyBoxInto", () => {
     it("copies one box into an existing box", () => {
diff --git a/packages/motion-dom/src/projection/geometry/__tests__/delta-apply.test.ts b/packages/motion-dom/src/projection/geometry/__tests__/delta-apply.test.ts
@@ -1,4 +1,4 @@
-import { scalePoint, applyPointDelta, applyAxisDelta } from "motion-dom"
+import { scalePoint, applyPointDelta, applyAxisDelta } from "../delta-apply"
 
 describe("scalePoint", () => {
     test("correctly scales a point based on a factor and an originPoint", () => {
diff --git a/packages/motion-dom/src/projection/geometry/__tests__/delta-calc.test.ts b/packages/motion-dom/src/projection/geometry/__tests__/delta-calc.test.ts
@@ -1,12 +1,6 @@
-import {
-    isNear,
-    calcAxisDelta,
-    calcRelativeBox,
-    calcRelativePosition,
-    applyAxisDelta,
-    createBox,
-    createDelta,
-} from "motion-dom"
+import { isNear, calcAxisDelta, calcRelativeBox, calcRelativePosition } from "../delta-calc"
+import { applyAxisDelta } from "../delta-apply"
+import { createBox, createDelta } from "../models"
 
 describe("isNear", () => {
     test("Correctly indicate when the provided value is within maxDistance of the provided target", () => {
diff --git a/packages/motion-dom/src/projection/geometry/__tests__/operations.test.ts b/packages/motion-dom/src/projection/geometry/__tests__/operations.test.ts
@@ -1,4 +1,5 @@
-import { createAxis, translateAxis } from "motion-dom"
+import { createAxis } from "../models"
+import { translateAxis } from "../delta-apply"
 
 describe("translateAxis", () => {
     it("applies a translation to an Axis", () => {
diff --git a/packages/motion-dom/src/projection/styles/__tests__/transform.test.ts b/packages/motion-dom/src/projection/styles/__tests__/transform.test.ts
@@ -1,4 +1,5 @@
-import { buildProjectionTransform, createDelta } from "motion-dom"
+import { buildProjectionTransform } from "../transform"
+import { createDelta } from "../../geometry/models"
 
 describe("buildProjectionTransform", () => {
     it("Returns 'none' when no transform required", () => {
diff --git a/packages/motion-dom/src/projection/utils/__tests__/each-axis.test.ts b/packages/motion-dom/src/projection/utils/__tests__/each-axis.test.ts
@@ -1,4 +1,4 @@
-import { eachAxis } from "motion-dom"
+import { eachAxis } from "../each-axis"
 
 describe("eachAxis", () => {
     it("calls a function, once for each axis", () => {
diff --git a/packages/motion-dom/src/render/utils/animation-state.ts b/packages/motion-dom/src/render/utils/animation-state.ts
@@ -5,6 +5,7 @@ import type {
 } from "../../node/types"
 import type { AnimationType } from "../types"
 import type { VisualElementAnimationOptions } from "../../animation/interfaces/types"
+import { animateVisualElement } from "../../animation/interfaces/visual-element"
 import { calcChildStagger } from "../../animation/utils/calc-child-stagger"
 import { getVariantContext } from "./get-variant-context"
 import { isAnimationControls } from "./is-animation-controls"
@@ -44,20 +45,18 @@ const numAnimationTypes = variantPriorityOrder.length
  */
 export type AnimateFunction = (animations: DefinitionAndOptions[]) => Promise<any>
 
-/**
- * Type for the function that creates an animate function for a visual element.
- */
-export type MakeAnimateFunction = (visualElement: any) => AnimateFunction
-
-function defaultAnimateList(_visualElement: any) {
-    return (_animations: DefinitionAndOptions[]) => Promise.resolve()
+function createAnimateFunction(visualElement: any): AnimateFunction {
+    return (animations: DefinitionAndOptions[]) => {
+        return Promise.all(
+            animations.map(({ animation, options }) =>
+                animateVisualElement(visualElement, animation, options)
+            )
+        )
+    }
 }
 
-export function createAnimationState(
-    visualElement: any,
-    makeAnimateFunction: MakeAnimateFunction = defaultAnimateList
-): AnimationState {
-    let animate = makeAnimateFunction(visualElement)
+export function createAnimationState(visualElement: any): AnimationState {
+    let animate = createAnimateFunction(visualElement)
     let state = createState()
     let isInitialRender = true
 
@@ -91,7 +90,9 @@ export function createAnimationState(
      * This just allows us to inject mocked animation functions
      * @internal
      */
-    function setAnimateFunction(makeAnimator: MakeAnimateFunction) {
+    function setAnimateFunction(
+        makeAnimator: (visualElement: any) => AnimateFunction
+    ) {
         animate = makeAnimator(visualElement)
     }
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { mixValues } from "motion-dom"`
	`1`	`+import { mixValues } from "../mix-values"`
`2`	`2`
`3`	`3`	`describe("mixValues", () => {`
`4`	`4`	`test("mixes borderRadius numbers", () => {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { convertBoundingBoxToBox } from "motion-dom"`
	`1`	`+import { convertBoundingBoxToBox } from "../conversion"`
`2`	`2`
`3`	`3`	`describe("convertBoundingBoxToBox", () => {`
`4`	`4`	`it("Correctly converts a bounding box into a box", () => {`