Feature/view function (#2970)

* Adding view() Adding view functions Refactor Latest Latest Latest Removing unused files Latest Latest Adding snapshot test * Latest * Updating sizes * removing logs * Latest * Fixing config * Latest
motiondivision · Jan 6, 2025 · d221138 · d221138
1 parent 8ca78c0
commit d221138
Show file tree

Hide file tree

Showing 103 changed files with 1,767 additions and 967 deletions.
diff --git a/dev/html/public/playwright/gestures/view-pause.html b/dev/html/public/playwright/gestures/view-pause.html
@@ -0,0 +1,66 @@
+<html>
+    <head>
+        <style>
+            body {
+                margin: 0;
+                display: flex;
+            }
+
+            .box {
+                width: 100px;
+                height: 100px;
+                background-color: red;
+                position: relative;
+                left: 0px;
+                view-transition-name: box;
+            }
+
+            main {
+                width: 600px;
+                padding: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <main>
+            <div class="box">test</div>
+        </main>
+        <script type="module" src="/src/inc.js"></script>
+        <script type="module">
+            const { press, view } = window.MotionDOM
+            const { scroll, spring } = window.Motion
+
+            const update = () => {
+                const box = document.querySelector(".box")
+                box.style.left = "100px"
+                box.style.top = "100px"
+                box.style.width = "200px"
+                box.style.height = "200px"
+                box.style.backgroundColor = "blue"
+                document.body.style.backgroundColor = "#eee"
+            }
+
+            async function runAnimation() {
+                const animation = await view(update, {
+                    type: spring,
+                    visualDuration: 2,
+                    bounce: 0.4,
+                    opacity: {
+                        bounce: 0,
+                    },
+                }).new(
+                    {
+                        opacity: 1,
+                        transform: ["translateX(100px)", "none"],
+                    },
+                    { delay: 1 }
+                )
+
+                animation.pause()
+                animation.time = 0.2
+            }
+
+            runAnimation()
+        </script>
+    </body>
+</html>
diff --git a/dev/html/src/inc.js b/dev/html/src/inc.js
@@ -1,3 +1,5 @@
+import * as Motion from "motion"
 import * as MotionDOM from "motion-dom"
 
 window.MotionDOM = MotionDOM
+window.Motion = Motion
diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json
@@ -70,14 +70,14 @@
     "scripts": {
         "eslint": "yarn run lint",
         "lint": "yarn eslint src/**/*.ts",
-        "build": "yarn clean && tsc -p . && rollup -c && node ./scripts/check-bundle.js",
+        "build": "yarn clean && tsc --noEmitOnError -p . && rollup -c && node ./scripts/check-bundle.js",
         "dev": "yarn watch",
         "clean": "rm -rf types dist lib",
         "test": "yarn test-server && yarn test-client",
         "test-client": "jest --config jest.config.json --max-workers=2",
         "test-server": "jest --config jest.config.ssr.json",
         "prettier": "prettier ./src/* --write",
-        "watch": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"",
+        "watch": "concurrently -c blue,red -n tsc --noEmitOnError ,rollup --kill-others \"tsc  --noEmitOnError --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\"",
         "prepack": "yarn build",
         "postpublish": "git push --tags",
         "measure": "rollup -c ./rollup.size.config.mjs"
@@ -110,31 +110,31 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "34.4 kB"
+            "maxSize": "34.5 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
             "maxSize": "5.71 kB"
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "17.32 kB"
+            "maxSize": "17.5 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
             "maxSize": "29.6 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "18.2 kB"
+            "maxSize": "18.4 kB"
         },
         {
             "path": "./dist/size-rollup-scroll.js",
             "maxSize": "5.2 kB"
         },
         {
             "path": "./dist/size-rollup-waapi-animate.js",
-            "maxSize": "2.54 kB"
+            "maxSize": "2.7 kB"
         }
     ],
     "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c"

diff --git a/packages/framer-motion/rollup.size.config.mjs b/packages/framer-motion/rollup.size.config.mjs
@@ -1,7 +1,7 @@
 import resolve from "@rollup/plugin-node-resolve"
 import { terser } from "rollup-plugin-terser"
 import { visualizer } from "rollup-plugin-visualizer"
-import { replaceSettings, es } from "./rollup.config.mjs"
+import { es, replaceSettings } from "./rollup.config.mjs"
 
 const sizePlugins = [
     resolve(),

diff --git a/packages/framer-motion/src/animation/animate/index.ts b/packages/framer-motion/src/animation/animate/index.ts
@@ -1,18 +1,19 @@
-import { AnimationScope, ElementOrSelector } from "motion-dom"
+import {
+    AnimationPlaybackControls,
+    AnimationScope,
+    DOMKeyframesDefinition,
+    AnimationOptions as DynamicAnimationOptions,
+    ElementOrSelector,
+    GroupPlaybackControls,
+    ValueAnimationTransition,
+} from "motion-dom"
 import { GenericKeyframesTarget } from "../../types"
 import type { MotionValue } from "../../value"
-import { GroupPlaybackControls } from "../GroupPlaybackControls"
 import {
     AnimationSequence,
     ObjectTarget,
     SequenceOptions,
 } from "../sequence/types"
-import {
-    AnimationPlaybackControls,
-    DOMKeyframesDefinition,
-    DynamicAnimationOptions,
-    ValueAnimationTransition,
-} from "../types"
 import { animateSequence } from "./sequence"
 import { animateSubject } from "./subject"
 

diff --git a/packages/framer-motion/src/animation/animate/resolve-subjects.ts b/packages/framer-motion/src/animation/animate/resolve-subjects.ts
@@ -1,6 +1,10 @@
-import { AnimationScope, SelectorCache, resolveElements } from "motion-dom"
+import {
+    AnimationScope,
+    DOMKeyframesDefinition,
+    SelectorCache,
+    resolveElements,
+} from "motion-dom"
 import { ObjectTarget } from "../sequence/types"
-import { DOMKeyframesDefinition } from "../types"
 import { isDOMKeyframes } from "../utils/is-dom-keyframes"
 
 export function resolveSubjects<O extends {}>(

diff --git a/packages/framer-motion/src/animation/animate/sequence.ts b/packages/framer-motion/src/animation/animate/sequence.ts
@@ -1,8 +1,7 @@
-import { AnimationScope } from "motion-dom"
+import { AnimationPlaybackControls, AnimationScope } from "motion-dom"
 import { spring } from "../generators/spring"
 import { createAnimationsFromSequence } from "../sequence/create"
 import { AnimationSequence, SequenceOptions } from "../sequence/types"
-import { AnimationPlaybackControls } from "../types"
 import { animateSubject } from "./subject"
 
 export function animateSequence(

diff --git a/packages/framer-motion/src/animation/animate/single-value.ts b/packages/framer-motion/src/animation/animate/single-value.ts
@@ -1,8 +1,8 @@
-import { animateMotionValue } from "../interfaces/motion-value"
+import { AnimationPlaybackControls, ValueAnimationTransition } from "motion-dom"
+import { GenericKeyframesTarget } from "../../types"
 import { motionValue as createMotionValue, MotionValue } from "../../value"
 import { isMotionValue } from "../../value/utils/is-motion-value"
-import { GenericKeyframesTarget } from "../../types"
-import { AnimationPlaybackControls, ValueAnimationTransition } from "../types"
+import { animateMotionValue } from "../interfaces/motion-value"
 
 export function animateSingleValue<V extends string | number>(
     value: MotionValue<V> | V,

diff --git a/packages/framer-motion/src/animation/animate/subject.ts b/packages/framer-motion/src/animation/animate/subject.ts
@@ -1,17 +1,18 @@
-import { AnimationScope, ElementOrSelector } from "motion-dom"
+import {
+    AnimationPlaybackControls,
+    AnimationScope,
+    DOMKeyframesDefinition,
+    AnimationOptions as DynamicAnimationOptions,
+    ElementOrSelector,
+    ValueAnimationTransition,
+} from "motion-dom"
 import { invariant } from "motion-utils"
 import { visualElementStore } from "../../render/store"
 import { GenericKeyframesTarget, TargetAndTransition } from "../../types"
 import type { MotionValue } from "../../value"
 import { isMotionValue } from "../../value/utils/is-motion-value"
 import { animateTarget } from "../interfaces/visual-element-target"
 import { ObjectTarget } from "../sequence/types"
-import {
-    AnimationPlaybackControls,
-    DOMKeyframesDefinition,
-    DynamicAnimationOptions,
-    ValueAnimationTransition,
-} from "../types"
 import {
     createDOMVisualElement,
     createObjectVisualElement,

diff --git a/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts b/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts
@@ -1,31 +1,31 @@
+import {
+    attachTimeline,
+    isGenerator,
+    isWaapiSupportedEasing,
+    supportsLinearEasing,
+    ValueAnimationOptions,
+} from "motion-dom"
+import {
+    millisecondsToSeconds,
+    noop,
+    secondsToMilliseconds,
+} from "motion-utils"
 import { anticipate } from "../../easing/anticipate"
 import { backInOut } from "../../easing/back"
 import { circInOut } from "../../easing/circ"
 import { EasingDefinition } from "../../easing/types"
 import { DOMKeyframesResolver } from "../../render/dom/DOMKeyframesResolver"
 import { ResolvedKeyframes } from "../../render/utils/KeyframesResolver"
-import { noop } from "motion-utils"
-import {
-    millisecondsToSeconds,
-    secondsToMilliseconds,
-} from "../../utils/time-conversion"
 import { MotionValue } from "../../value"
-import { isGenerator } from "../generators/utils/is-generator"
-import {
-    ValueAnimationOptions,
-    ValueAnimationOptionsWithRenderContext,
-} from "../types"
+import { ValueAnimationOptionsWithRenderContext } from "../types"
 import {
     BaseAnimation,
     ValueAnimationOptionsWithDefaults,
 } from "./BaseAnimation"
 import { MainThreadAnimation } from "./MainThreadAnimation"
 import { acceleratedValues } from "./utils/accelerated-values"
 import { startWaapiAnimation } from "./waapi"
-import { isWaapiSupportedEasing } from "./waapi/easing"
-import { attachTimeline } from "./waapi/utils/attach-timeline"
 import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe"
-import { supportsLinearEasing } from "./waapi/utils/supports-linear-easing"
 import { supportsWaapi } from "./waapi/utils/supports-waapi"
 
 /**

diff --git a/packages/framer-motion/src/animation/animators/BaseAnimation.ts b/packages/framer-motion/src/animation/animators/BaseAnimation.ts
@@ -1,16 +1,16 @@
+import {
+    AnimationPlaybackControls,
+    RepeatType,
+    ValueAnimationOptions,
+} from "motion-dom"
 import { time } from "../../frameloop/sync-time"
 import {
     KeyframeResolver,
     ResolvedKeyframes,
     flushKeyframeResolvers,
 } from "../../render/utils/KeyframesResolver"
 import { instantAnimationState } from "../../utils/use-instant-transition-state"
-import {
-    AnimationPlaybackControls,
-    RepeatType,
-    ValueAnimationOptions,
-    ValueAnimationOptionsWithRenderContext,
-} from "../types"
+import { ValueAnimationOptionsWithRenderContext } from "../types"
 import { canAnimate } from "./utils/can-animate"
 import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe"
 

diff --git a/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts b/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts
@@ -1,29 +1,29 @@
+import {
+    calcGeneratorDuration,
+    isGenerator,
+    ValueAnimationOptions,
+} from "motion-dom"
+import {
+    invariant,
+    millisecondsToSeconds,
+    secondsToMilliseconds,
+} from "motion-utils"
 import {
     KeyframeResolver as DefaultKeyframeResolver,
     ResolvedKeyframes,
 } from "../../render/utils/KeyframesResolver"
-import { spring } from "../generators/spring/index"
+import { clamp } from "../../utils/clamp"
+import { mix } from "../../utils/mix"
+import { pipe } from "../../utils/pipe"
 import { inertia } from "../generators/inertia"
 import { keyframes as keyframesGeneratorFactory } from "../generators/keyframes"
-import {
-    ValueAnimationOptions,
-    ValueAnimationOptionsWithRenderContext,
-} from "../types"
-import { BaseAnimation } from "./BaseAnimation"
+import { spring } from "../generators/spring/index"
 import { AnimationState, KeyframeGenerator } from "../generators/types"
-import { pipe } from "../../utils/pipe"
-import { mix } from "../../utils/mix"
-import { calcGeneratorDuration } from "../generators/utils/calc-duration"
-import { DriverControls } from "./drivers/types"
-import {
-    millisecondsToSeconds,
-    secondsToMilliseconds,
-} from "../../utils/time-conversion"
-import { clamp } from "../../utils/clamp"
-import { invariant } from "motion-utils"
+import { ValueAnimationOptionsWithRenderContext } from "../types"
+import { BaseAnimation } from "./BaseAnimation"
 import { frameloopDriver } from "./drivers/driver-frameloop"
+import { DriverControls } from "./drivers/types"
 import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe"
-import { isGenerator } from "../generators/utils/is-generator"
 
 type GeneratorFactory = (
     options: ValueAnimationOptions<any>

diff --git a/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts b/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts
@@ -1,10 +1,10 @@
-import { MainThreadAnimation, animateValue } from "../MainThreadAnimation"
+import { ValueAnimationOptions } from "motion-dom"
+import { noop } from "motion-utils"
 import { reverseEasing } from "../../../easing/modifiers/reverse"
 import { nextFrame } from "../../../gestures/__tests__/utils"
-import { noop } from "motion-utils"
-import { ValueAnimationOptions } from "../../types"
-import { syncDriver } from "./utils"
 import { KeyframeResolver } from "../../../render/utils/KeyframesResolver"
+import { MainThreadAnimation, animateValue } from "../MainThreadAnimation"
+import { syncDriver } from "./utils"
 
 const linear = noop
 

diff --git a/packages/framer-motion/src/animation/animators/utils/can-animate.ts b/packages/framer-motion/src/animation/animators/utils/can-animate.ts
@@ -1,7 +1,6 @@
-import { ResolvedKeyframes } from "../../../render/utils/KeyframesResolver"
+import { AnimationGeneratorType, isGenerator } from "motion-dom"
 import { warning } from "motion-utils"
-import { isGenerator } from "../../generators/utils/is-generator"
-import { AnimationGeneratorType } from "../../types"
+import { ResolvedKeyframes } from "../../../render/utils/KeyframesResolver"
 import { isAnimatable } from "../../utils/is-animatable"
 
 function hasKeyframesChanged(keyframes: ResolvedKeyframes<any>) {