motion 12.3.1 → 12.4.1

package/dist/cjs/debug.js

@@ -0,0 +1,291 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const activeAnimations = {
+    layout: 0,
+    mainThread: 0,
+    waapi: 0,
+};
+
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
+
+/*#__NO_SIDE_EFFECTS__*/
+const noop = (any) => any;
+
+if (process.env.NODE_ENV !== "production") ;
+
+const stepsOrder = [
+    "read", // Read
+    "resolveKeyframes", // Write/Read/Write/Read
+    "update", // Compute
+    "preRender", // Compute
+    "render", // Write
+    "postRender", // Compute
+];
+
+function createRenderStep(runNextFrame, stepName) {
+    /**
+     * We create and reuse two queues, one to queue jobs for the current frame
+     * and one for the next. We reuse to avoid triggering GC after x frames.
+     */
+    let thisFrame = new Set();
+    let nextFrame = new Set();
+    /**
+     * Track whether we're currently processing jobs in this step. This way
+     * we can decide whether to schedule new jobs for this frame or next.
+     */
+    let isProcessing = false;
+    let flushNextFrame = false;
+    /**
+     * A set of processes which were marked keepAlive when scheduled.
+     */
+    const toKeepAlive = new WeakSet();
+    let latestFrameData = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    let numCalls = 0;
+    function triggerCallback(callback) {
+        if (toKeepAlive.has(callback)) {
+            step.schedule(callback);
+            runNextFrame();
+        }
+        numCalls++;
+        callback(latestFrameData);
+    }
+    const step = {
+        /**
+         * Schedule a process to run on the next frame.
+         */
+        schedule: (callback, keepAlive = false, immediate = false) => {
+            const addToCurrentFrame = immediate && isProcessing;
+            const queue = addToCurrentFrame ? thisFrame : nextFrame;
+            if (keepAlive)
+                toKeepAlive.add(callback);
+            if (!queue.has(callback))
+                queue.add(callback);
+            return callback;
+        },
+        /**
+         * Cancel the provided callback from running on the next frame.
+         */
+        cancel: (callback) => {
+            nextFrame.delete(callback);
+            toKeepAlive.delete(callback);
+        },
+        /**
+         * Execute all schedule callbacks.
+         */
+        process: (frameData) => {
+            latestFrameData = frameData;
+            /**
+             * If we're already processing we've probably been triggered by a flushSync
+             * inside an existing process. Instead of executing, mark flushNextFrame
+             * as true and ensure we flush the following frame at the end of this one.
+             */
+            if (isProcessing) {
+                flushNextFrame = true;
+                return;
+            }
+            isProcessing = true;
+            [thisFrame, nextFrame] = [nextFrame, thisFrame];
+            // Execute this frame
+            thisFrame.forEach(triggerCallback);
+            /**
+             * If we're recording stats then
+             */
+            if (stepName && statsBuffer.value) {
+                statsBuffer.value.frameloop[stepName].push(numCalls);
+            }
+            numCalls = 0;
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
+            isProcessing = false;
+            if (flushNextFrame) {
+                flushNextFrame = false;
+                step.process(frameData);
+            }
+        },
+    };
+    return step;
+}
+
+const maxElapsed = 40;
+function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+    let runNextFrame = false;
+    let useDefaultElapsed = true;
+    const state = {
+        delta: 0.0,
+        timestamp: 0.0,
+        isProcessing: false,
+    };
+    const flagRunNextFrame = () => (runNextFrame = true);
+    const steps = stepsOrder.reduce((acc, key) => {
+        acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
+        return acc;
+    }, {});
+    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const processBatch = () => {
+        const timestamp = performance.now();
+        runNextFrame = false;
+        {
+            state.delta = useDefaultElapsed
+                ? 1000 / 60
+                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        }
+        state.timestamp = timestamp;
+        state.isProcessing = true;
+        // Unrolled render loop for better per-frame performance
+        read.process(state);
+        resolveKeyframes.process(state);
+        update.process(state);
+        preRender.process(state);
+        render.process(state);
+        postRender.process(state);
+        state.isProcessing = false;
+        if (runNextFrame && allowKeepAlive) {
+            useDefaultElapsed = false;
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const wake = () => {
+        runNextFrame = true;
+        useDefaultElapsed = true;
+        if (!state.isProcessing) {
+            scheduleNextBatch(processBatch);
+        }
+    };
+    const schedule = stepsOrder.reduce((acc, key) => {
+        const step = steps[key];
+        acc[key] = (process, keepAlive = false, immediate = false) => {
+            if (!runNextFrame)
+                wake();
+            return step.schedule(process, keepAlive, immediate);
+        };
+        return acc;
+    }, {});
+    const cancel = (process) => {
+        for (let i = 0; i < stepsOrder.length; i++) {
+            steps[stepsOrder[i]].cancel(process);
+        }
+    };
+    return { schedule, cancel, state, steps };
+}
+
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+
+function record() {
+    const { value } = statsBuffer;
+    if (value === null) {
+        cancelFrame(record);
+        return;
+    }
+    value.frameloop.rate.push(frameData.delta);
+    value.animations.mainThread.push(activeAnimations.mainThread);
+    value.animations.waapi.push(activeAnimations.waapi);
+    value.animations.layout.push(activeAnimations.layout);
+}
+function mean(values) {
+    return values.reduce((acc, value) => acc + value, 0) / values.length;
+}
+function summarise(values, calcAverage = mean) {
+    if (values.length === 0) {
+        return {
+            min: 0,
+            max: 0,
+            avg: 0,
+        };
+    }
+    return {
+        min: Math.min(...values),
+        max: Math.max(...values),
+        avg: calcAverage(values),
+    };
+}
+const msToFps = (ms) => Math.round(1000 / ms);
+function clearStatsBuffer() {
+    statsBuffer.value = null;
+    statsBuffer.addProjectionMetrics = null;
+}
+function reportStats() {
+    const { value } = statsBuffer;
+    if (!value) {
+        throw new Error("Stats are not being measured");
+    }
+    clearStatsBuffer();
+    cancelFrame(record);
+    const summary = {
+        frameloop: {
+            rate: summarise(value.frameloop.rate),
+            read: summarise(value.frameloop.read),
+            resolveKeyframes: summarise(value.frameloop.resolveKeyframes),
+            update: summarise(value.frameloop.update),
+            preRender: summarise(value.frameloop.preRender),
+            render: summarise(value.frameloop.render),
+            postRender: summarise(value.frameloop.postRender),
+        },
+        animations: {
+            mainThread: summarise(value.animations.mainThread),
+            waapi: summarise(value.animations.waapi),
+            layout: summarise(value.animations.layout),
+        },
+        layoutProjection: {
+            nodes: summarise(value.layoutProjection.nodes),
+            calculatedTargetDeltas: summarise(value.layoutProjection.calculatedTargetDeltas),
+            calculatedProjections: summarise(value.layoutProjection.calculatedProjections),
+        },
+    };
+    /**
+     * Convert the rate to FPS
+     */
+    const { rate } = summary.frameloop;
+    rate.min = msToFps(rate.min);
+    rate.max = msToFps(rate.max);
+    rate.avg = msToFps(rate.avg);
+    [rate.min, rate.max] = [rate.max, rate.min];
+    return summary;
+}
+function recordStats() {
+    if (statsBuffer.value) {
+        clearStatsBuffer();
+        throw new Error("Stats are already being measured");
+    }
+    const newStatsBuffer = statsBuffer;
+    newStatsBuffer.value = {
+        frameloop: {
+            rate: [],
+            read: [],
+            resolveKeyframes: [],
+            update: [],
+            preRender: [],
+            render: [],
+            postRender: [],
+        },
+        animations: {
+            mainThread: [],
+            waapi: [],
+            layout: [],
+        },
+        layoutProjection: {
+            nodes: [],
+            calculatedTargetDeltas: [],
+            calculatedProjections: [],
+        },
+    };
+    newStatsBuffer.addProjectionMetrics = (metrics) => {
+        const { layoutProjection } = newStatsBuffer.value;
+        layoutProjection.nodes.push(metrics.nodes);
+        layoutProjection.calculatedTargetDeltas.push(metrics.calculatedTargetDeltas);
+        layoutProjection.calculatedProjections.push(metrics.calculatedProjections);
+    };
+    frame.postRender(record, true);
+    return reportStats;
+}
+
+exports.recordStats = recordStats;

package/dist/cjs/index.js

@@ -1318,7 +1318,21 @@ const MotionGlobalConfig = {
     useManualTiming: false,
 };
 
-function createRenderStep(runNextFrame) {
+const stepsOrder = [
+    "read", // Read
+    "resolveKeyframes", // Write/Read/Write/Read
+    "update", // Compute
+    "preRender", // Compute
+    "render", // Write
+    "postRender", // Compute
+];
+
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
+
+function createRenderStep(runNextFrame, stepName) {
     /**
      * We create and reuse two queues, one to queue jobs for the current frame
      * and one for the next. We reuse to avoid triggering GC after x frames.
@@ -1340,11 +1354,13 @@ function createRenderStep(runNextFrame) {
         timestamp: 0.0,
         isProcessing: false,
     };
+    let numCalls = 0;
     function triggerCallback(callback) {
         if (toKeepAlive.has(callback)) {
             step.schedule(callback);
             runNextFrame();
         }
+        numCalls++;
         callback(latestFrameData);
     }
     const step = {
@@ -1385,6 +1401,13 @@ function createRenderStep(runNextFrame) {
             [thisFrame, nextFrame] = [nextFrame, thisFrame];
             // Execute this frame
             thisFrame.forEach(triggerCallback);
+            /**
+             * If we're recording stats then
+             */
+            if (stepName && statsBuffer.value) {
+                statsBuffer.value.frameloop[stepName].push(numCalls);
+            }
+            numCalls = 0;
             // Clear the frame so no callbacks remain. This is to avoid
             // memory leaks should this render step not run for a while.
             thisFrame.clear();
@@ -1398,14 +1421,6 @@ function createRenderStep(runNextFrame) {
     return step;
 }
 
-const stepsOrder = [
-    "read", // Read
-    "resolveKeyframes", // Write/Read/Write/Read
-    "update", // Compute
-    "preRender", // Compute
-    "render", // Write
-    "postRender", // Compute
-];
 const maxElapsed$1 = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     let runNextFrame = false;
@@ -1417,16 +1432,18 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     };
     const flagRunNextFrame = () => (runNextFrame = true);
     const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(flagRunNextFrame);
+        acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
         return acc;
     }, {});
     const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
     const processBatch = () => {
         const timestamp = performance.now();
         runNextFrame = false;
-        state.delta = useDefaultElapsed
-            ? 1000 / 60
-            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
+        {
+            state.delta = useDefaultElapsed
+                ? 1000 / 60
+                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed$1), 1);
+        }
         state.timestamp = timestamp;
         state.isProcessing = true;
         // Unrolled render loop for better per-frame performance
@@ -1569,7 +1586,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.3.1";
+        this.version = "12.4.1";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3868,7 +3885,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
-    return element.animate(keyframeOptions, {
+    const animation = element.animate(keyframeOptions, {
         delay,
         duration,
         easing: !Array.isArray(easing) ? easing : "linear",
@@ -3876,6 +3893,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
     });
+    return animation;
 }
 
 const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
@@ -4503,7 +4521,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.3.1", `Attempting to mix Motion versions ${nextValue.version} with 12.3.1 may not work as expected.`);
+                warnOnce(nextValue.version === "12.4.1", `Attempting to mix Motion versions ${nextValue.version} with 12.4.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/mini.js

@@ -764,7 +764,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
-    return element.animate(keyframeOptions, {
+    const animation = element.animate(keyframeOptions, {
         delay,
         duration,
         easing: !Array.isArray(easing) ? easing : "linear",
@@ -772,6 +772,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
     });
+    return animation;
 }
 
 const createUnitType = (unit) => ({

package/dist/cjs/react-client.js

@@ -614,7 +614,21 @@ const MotionGlobalConfig = {
     useManualTiming: false,
 };
 
-function createRenderStep(runNextFrame) {
+const stepsOrder = [
+    "read", // Read
+    "resolveKeyframes", // Write/Read/Write/Read
+    "update", // Compute
+    "preRender", // Compute
+    "render", // Write
+    "postRender", // Compute
+];
+
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
+
+function createRenderStep(runNextFrame, stepName) {
     /**
      * We create and reuse two queues, one to queue jobs for the current frame
      * and one for the next. We reuse to avoid triggering GC after x frames.
@@ -636,11 +650,13 @@ function createRenderStep(runNextFrame) {
         timestamp: 0.0,
         isProcessing: false,
     };
+    let numCalls = 0;
     function triggerCallback(callback) {
         if (toKeepAlive.has(callback)) {
             step.schedule(callback);
             runNextFrame();
         }
+        numCalls++;
         callback(latestFrameData);
     }
     const step = {
@@ -681,6 +697,13 @@ function createRenderStep(runNextFrame) {
             [thisFrame, nextFrame] = [nextFrame, thisFrame];
             // Execute this frame
             thisFrame.forEach(triggerCallback);
+            /**
+             * If we're recording stats then
+             */
+            if (stepName && statsBuffer.value) {
+                statsBuffer.value.frameloop[stepName].push(numCalls);
+            }
+            numCalls = 0;
             // Clear the frame so no callbacks remain. This is to avoid
             // memory leaks should this render step not run for a while.
             thisFrame.clear();
@@ -694,14 +717,6 @@ function createRenderStep(runNextFrame) {
     return step;
 }
 
-const stepsOrder = [
-    "read", // Read
-    "resolveKeyframes", // Write/Read/Write/Read
-    "update", // Compute
-    "preRender", // Compute
-    "render", // Write
-    "postRender", // Compute
-];
 const maxElapsed = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     let runNextFrame = false;
@@ -713,16 +728,18 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     };
     const flagRunNextFrame = () => (runNextFrame = true);
     const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(flagRunNextFrame);
+        acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
         return acc;
     }, {});
     const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
     const processBatch = () => {
         const timestamp = performance.now();
         runNextFrame = false;
-        state.delta = useDefaultElapsed
-            ? 1000 / 60
-            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        {
+            state.delta = useDefaultElapsed
+                ? 1000 / 60
+                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
+        }
         state.timestamp = timestamp;
         state.isProcessing = true;
         // Unrolled render loop for better per-frame performance
@@ -885,7 +902,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.3.1";
+        this.version = "12.4.1";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3467,7 +3484,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
-    return element.animate(keyframeOptions, {
+    const animation = element.animate(keyframeOptions, {
         delay,
         duration,
         easing: !Array.isArray(easing) ? easing : "linear",
@@ -3475,6 +3492,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
     });
+    return animation;
 }
 
 const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
@@ -4372,6 +4390,18 @@ function createAnimationState(visualElement) {
          */
         if (removedKeys.size) {
             const fallbackAnimation = {};
+            /**
+             * If the initial prop contains a transition we can use that, otherwise
+             * allow the animation function to use the visual element's default.
+             */
+            if (typeof props.initial !== "boolean") {
+                const initialTransition = resolveVariant(visualElement, Array.isArray(props.initial)
+                    ? props.initial[0]
+                    : props.initial);
+                if (initialTransition && initialTransition.transition) {
+                    fallbackAnimation.transition = initialTransition.transition;
+                }
+            }
             removedKeys.forEach((key) => {
                 const fallbackTarget = visualElement.getBaseTarget(key);
                 const motionValue = visualElement.getValue(key);
@@ -6306,13 +6336,6 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
     return transform || "none";
 }
 
-const metrics = {
-    type: "projectionFrame",
-    totalNodes: 0,
-    resolvedTargetDeltas: 0,
-    recalculatedProjection: 0,
-};
-const isDebug = typeof window !== "undefined" && window.MotionDebug !== undefined;
 const transformAxes = ["", "X", "Y", "Z"];
 const hiddenVisibility = { visibility: "hidden" };
 /**
@@ -6462,23 +6485,10 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
              */
             this.updateProjection = () => {
                 this.projectionUpdateScheduled = false;
-                /**
-                 * Reset debug counts. Manually resetting rather than creating a new
-                 * object each frame.
-                 */
-                if (isDebug) {
-                    metrics.totalNodes =
-                        metrics.resolvedTargetDeltas =
-                            metrics.recalculatedProjection =
-                                0;
-                }
                 this.nodes.forEach(propagateDirtyNodes);
                 this.nodes.forEach(resolveTargetDelta);
                 this.nodes.forEach(calcProjection);
                 this.nodes.forEach(cleanDirtyNodes);
-                if (isDebug) {
-                    window.MotionDebug.record(metrics);
-                }
             };
             /**
              * Frame calculations
@@ -7121,12 +7131,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                     this.relativeParent = this.relativeTarget = undefined;
                 }
             }
-            /**
-             * Increase debug counter for resolved target deltas
-             */
-            if (isDebug) {
-                metrics.resolvedTargetDeltas++;
-            }
         }
         getClosestProjectingParent() {
             if (!this.parent ||
@@ -7252,12 +7256,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                 this.scheduleRender();
                 this.notifyListeners("projectionUpdate", target);
             }
-            /**
-             * Increase debug counter for recalculated projections
-             */
-            if (isDebug) {
-                metrics.recalculatedProjection++;
-            }
         }
         hide() {
             this.isVisible = false;
@@ -7364,6 +7362,8 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                         this.mixTargetDelta(latest);
                         options.onUpdate && options.onUpdate(latest);
                     },
+                    onStop: () => {
+                    },
                     onComplete: () => {
                         options.onComplete && options.onComplete();
                         this.completeAnimation();
@@ -7761,12 +7761,6 @@ function notifyLayoutUpdate(node) {
     node.options.transition = undefined;
 }
 function propagateDirtyNodes(node) {
-    /**
-     * Increase debug counter for nodes encountered this frame
-     */
-    if (isDebug) {
-        metrics.totalNodes++;
-    }
     if (!node.parent)
         return;
     /**
@@ -9266,7 +9260,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.3.1", `Attempting to mix Motion versions ${nextValue.version} with 12.3.1 may not work as expected.`);
+                warnOnce(nextValue.version === "12.4.1", `Attempting to mix Motion versions ${nextValue.version} with 12.4.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {