Adding vanilla motionValue

Author: mattgperry

packages/framer-motion/src/animation/animate/index.ts

@@ -4,10 +4,10 @@ import type {
     DOMKeyframesDefinition,
     AnimationOptions as DynamicAnimationOptions,
     ElementOrSelector,
-    GroupPlaybackControls,
     MotionValue,
     ValueAnimationTransition,
 } from "motion-dom"
+import { GroupPlaybackControls } from "motion-dom"
 import { GenericKeyframesTarget } from "../../types"
 import {
     AnimationSequence,

packages/framer-motion/src/debug.ts

@@ -1,2 +1,2 @@
-export { recordStats } from "../../motion-dom/src/stats"
-export type * from "../../motion-dom/src/stats/types"
+export type * from "motion-dom"
+export { recordStats } from "motion-dom"

packages/framer-motion/src/dom.ts

@@ -1,9 +1,13 @@
 export {
+    cancelFrame,
+    frame,
+    frameData,
     hover,
     isDragActive,
     MotionValue,
     motionValue,
     press,
+    time,
 } from "motion-dom"
 export { invariant, noop, progress } from "motion-utils"
 
@@ -44,8 +48,6 @@ export { spring } from "./animation/generators/spring"
  * Utils
  */
 export { stagger } from "./animation/utils/stagger"
-export * from "./frameloop"
-export { time } from "./frameloop/sync-time"
 export { clamp } from "./utils/clamp"
 export { delayInSeconds as delay, DelayedFunction } from "./utils/delay"
 export * from "./utils/distance"
@@ -54,8 +56,3 @@ export { mix } from "./utils/mix"
 export { pipe } from "./utils/pipe"
 export { transform } from "./utils/transform"
 export { wrap } from "./utils/wrap"
-
-/**
- * Deprecated
- */
-export { cancelSync, sync } from "./frameloop/index-legacy"

packages/framer-motion/src/projection.ts

@@ -1,5 +1,4 @@
-export { recordStats } from "../../motion-dom/src/stats"
-export { statsBuffer } from "../../motion-dom/src/stats/buffer"
+export { recordStats, statsBuffer } from "motion-dom"
 export { calcBoxDelta } from "./projection/geometry/delta-calc"
 export { nodeGroup } from "./projection/node/group"
 export { HTMLProjectionNode } from "./projection/node/HTMLProjectionNode"
@@ -9,6 +8,6 @@ export { addScaleCorrector } from "./projection/styles/scale-correction"
 export { HTMLVisualElement } from "./render/html/HTMLVisualElement"
 export { buildTransform } from "./render/html/utils/build-transform"
 export { animateValue as animate, frame, frameData, mix }
+import { frame, frameData } from "motion-dom"
 import { animateValue } from "./animation/animators/MainThreadAnimation"
-import { frame, frameData } from "./frameloop"
 import { mix } from "./utils/mix"

packages/framer-motion/src/render/VisualElement.ts

@@ -5,8 +5,7 @@ import {
     time,
     type MotionValue,
 } from "motion-dom"
-import { warnOnce } from "motion-utils"
-import { SubscriptionManager } from "../../../motion-utils/src/subscription-manager"
+import { SubscriptionManager, warnOnce } from "motion-utils"
 import {
     MotionConfigContext,
     ReducedMotionConfig,

packages/framer-motion/src/value/use-will-change/WillChangeMotionValue.ts

@@ -3,7 +3,10 @@ import { addUniqueItem } from "motion-utils"
 import { getWillChangeName } from "./get-will-change-name"
 import { WillChange } from "./types"
 
-export class WillChangeMotionValue extends MotionValue implements WillChange {
+export class WillChangeMotionValue
+    extends MotionValue<string>
+    implements WillChange
+{
     private values: string[] = []
 
     add(name: string) {

packages/framer-motion/src/value/use-will-change/types.ts

@@ -1,5 +1,5 @@
 import type { MotionValue } from "motion-dom"
 
-export interface WillChange extends MotionValue {
+export interface WillChange extends MotionValue<string> {
     add(name: string): void
 }

packages/motion-dom/src/value/index.ts

@@ -134,7 +134,6 @@ export class MotionValue<V = any> {
 
     /**
      * Tracks whether this value should be removed
-     * @internal
      */
     liveStyle?: boolean
 
@@ -143,8 +142,6 @@ export class MotionValue<V = any> {
      * @param config - Optional configuration options
      *
      * -  `transformer`: A function to transform incoming values with.
-     *
-     * @internal
      */
     constructor(init: V, options: MotionValueOptions = {}) {
         this.setCurrent(init)
@@ -259,8 +256,6 @@ export class MotionValue<V = any> {
 
     /**
      * Attaches a passive effect to the `MotionValue`.
-     *
-     * @internal
      */
     attach(passiveEffect: PassiveEffect<V>, stopPassiveEffect: VoidFunction) {
         this.passiveEffect = passiveEffect
@@ -400,8 +395,6 @@ export class MotionValue<V = any> {
      * ```
      *
      * @param animation - A function that starts the provided animation
-     *
-     * @internal
      */
     start(startAnimation: StartAnimation) {
         this.stop()