framer-motion 8.0.3 → 8.0.4

package/dist/cjs/index.js

@@ -90,7 +90,6 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
             visualElement.animationState.animateChanges();
         }
     });
-    useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notify("Unmount"), []);
     return visualElement;
 }
 
@@ -2062,7 +2061,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 = "8.0.3";
+        this.version = "8.0.4";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2176,14 +2175,6 @@ class MotionValue {
      * }
      * ```
      *
-     * @privateRemarks
-     *
-     * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
-     *
-     * ```jsx
-     * useOnChange(x, () => {})
-     * ```
-     *
      * @param subscriber - A function that receives the latest value.
      * @returns A function that, when called, will cancel this subscription.
      *
@@ -2196,7 +2187,22 @@ class MotionValue {
         if (!this.events[eventName]) {
             this.events[eventName] = new SubscriptionManager();
         }
-        return this.events[eventName].add(callback);
+        const unsubscribe = this.events[eventName].add(callback);
+        if (eventName === "change") {
+            return () => {
+                unsubscribe();
+                /**
+                 * If we have no more change listeners by the start
+                 * of the next frame, stop active animations.
+                 */
+                sync.read(() => {
+                    if (!this.events.change.getSize()) {
+                        this.stop();
+                    }
+                });
+            };
+        }
+        return unsubscribe;
     }
     clearListeners() {
         for (const eventManagers in this.events) {
@@ -5865,7 +5871,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.3 may not work as expected.`);
+                warnOnce(nextValue.version === "8.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5909,7 +5915,6 @@ const propEventHandlers = [
     "AnimationStart",
     "AnimationComplete",
     "Update",
-    "Unmount",
     "BeforeLayoutMeasure",
     "LayoutMeasure",
     "LayoutAnimationStart",
@@ -6255,11 +6260,12 @@ class VisualElement {
      */
     addValue(key, value) {
         // Remove existing value if it exists
-        if (this.hasValue(key))
+        if (value !== this.values.get(key)) {
             this.removeValue(key);
+            this.bindToMotionValue(key, value);
+        }
         this.values.set(key, value);
         this.latestValues[key] = value.get();
-        this.bindToMotionValue(key, value);
     }
     /**
      * Remove a motion value and unbind any active subscriptions.
@@ -6278,10 +6284,6 @@ class VisualElement {
     hasValue(key) {
         return this.values.has(key);
     }
-    /**
-     * Get a motion value for this key. If called with a default
-     * value, we'll create one if none exists.
-     */
     getValue(key, defaultValue) {
         if (this.props.values && this.props.values[key]) {
             return this.props.values[key];
@@ -8981,24 +8983,6 @@ function transform(...args) {
     return useImmediate ? interpolator(inputValue) : interpolator;
 }
 
-function useOnChange(value, callback) {
-    useIsomorphicLayoutEffect(() => {
-        if (isMotionValue(value)) {
-            callback(value.get());
-            return value.on("change", callback);
-        }
-    }, [value, callback]);
-}
-function useMultiOnChange(values, handler, cleanup) {
-    useIsomorphicLayoutEffect(() => {
-        const subscriptions = values.map((value) => value.on("change", handler));
-        return () => {
-            subscriptions.forEach((unsubscribe) => unsubscribe());
-            cleanup();
-        };
-    });
-}
-
 function useCombineMotionValues(values, combineValues) {
     /**
      * Initialise the returned motion value. This remains the same between renders.
@@ -9020,7 +9004,14 @@ function useCombineMotionValues(values, combineValues) {
      * Subscribe to all motion values found within the template. Whenever any of them change,
      * schedule an update.
      */
-    useMultiOnChange(values, () => sync.update(updateValue, false, true), () => cancelSync.update(updateValue));
+    useIsomorphicLayoutEffect(() => {
+        const scheduleUpdate = () => sync.update(updateValue, false, true);
+        const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
+        return () => {
+            subscriptions.forEach((unsubscribe) => unsubscribe());
+            cancelSync.update(updateValue);
+        };
+    });
     return value;
 }
 
@@ -9180,7 +9171,11 @@ function useSpring(source, config = {}) {
             return value.get();
         });
     }, [JSON.stringify(config)]);
-    useOnChange(source, (v) => value.set(parseFloat(v)));
+    useIsomorphicLayoutEffect(() => {
+        if (isMotionValue(source)) {
+            return source.on("change", (v) => value.set(parseFloat(v)));
+        }
+    }, [value]);
     return value;
 }
 
@@ -9317,7 +9312,13 @@ function useWillChange() {
 }
 
 function useMotionValueEvent(value, event, callback) {
-    useIsomorphicLayoutEffect(() => value.on(event, callback), [value, event, callback]);
+    /**
+     * useInsertionEffect will create subscriptions before any other
+     * effects will run. Effects run upwards through the tree so it
+     * can be that binding a useLayoutEffect higher up the tree can
+     * miss changes from lower down the tree.
+     */
+    React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
 }
 
 /**

package/dist/es/motion/utils/use-visual-element.mjs

@@ -41,7 +41,6 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
             visualElement.animationState.animateChanges();
         }
     });
-    useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notify("Unmount"), []);
     return visualElement;
 }
 

package/dist/es/render/VisualElement.mjs

@@ -24,7 +24,6 @@ const propEventHandlers = [
     "AnimationStart",
     "AnimationComplete",
     "Update",
-    "Unmount",
     "BeforeLayoutMeasure",
     "LayoutMeasure",
     "LayoutAnimationStart",
@@ -370,11 +369,12 @@ class VisualElement {
      */
     addValue(key, value) {
         // Remove existing value if it exists
-        if (this.hasValue(key))
+        if (value !== this.values.get(key)) {
             this.removeValue(key);
+            this.bindToMotionValue(key, value);
+        }
         this.values.set(key, value);
         this.latestValues[key] = value.get();
-        this.bindToMotionValue(key, value);
     }
     /**
      * Remove a motion value and unbind any active subscriptions.
@@ -393,10 +393,6 @@ class VisualElement {
     hasValue(key) {
         return this.values.has(key);
     }
-    /**
-     * Get a motion value for this key. If called with a default
-     * value, we'll create one if none exists.
-     */
     getValue(key, defaultValue) {
         if (this.props.values && this.props.values[key]) {
             return this.props.values[key];

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.3 may not work as expected.`);
+                warnOnce(nextValue.version === "8.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/use-motion-value-event.mjs

@@ -1,7 +1,13 @@
-import { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';
+import { useInsertionEffect } from 'react';
 
 function useMotionValueEvent(value, event, callback) {
-    useIsomorphicLayoutEffect(() => value.on(event, callback), [value, event, callback]);
+    /**
+     * useInsertionEffect will create subscriptions before any other
+     * effects will run. Effects run upwards through the tree so it
+     * can be that binding a useLayoutEffect higher up the tree can
+     * miss changes from lower down the tree.
+     */
+    useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
 }
 
 export { useMotionValueEvent };

package/dist/es/value/index.mjs

@@ -25,7 +25,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 = "8.0.3";
+        this.version = "8.0.4";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -139,14 +139,6 @@ class MotionValue {
      * }
      * ```
      *
-     * @privateRemarks
-     *
-     * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
-     *
-     * ```jsx
-     * useOnChange(x, () => {})
-     * ```
-     *
      * @param subscriber - A function that receives the latest value.
      * @returns A function that, when called, will cancel this subscription.
      *
@@ -159,7 +151,22 @@ class MotionValue {
         if (!this.events[eventName]) {
             this.events[eventName] = new SubscriptionManager();
         }
-        return this.events[eventName].add(callback);
+        const unsubscribe = this.events[eventName].add(callback);
+        if (eventName === "change") {
+            return () => {
+                unsubscribe();
+                /**
+                 * If we have no more change listeners by the start
+                 * of the next frame, stop active animations.
+                 */
+                sync.read(() => {
+                    if (!this.events.change.getSize()) {
+                        this.stop();
+                    }
+                });
+            };
+        }
+        return unsubscribe;
     }
     clearListeners() {
         for (const eventManagers in this.events) {

package/dist/es/value/use-combine-values.mjs

@@ -1,6 +1,6 @@
 import { useMotionValue } from './use-motion-value.mjs';
-import { useMultiOnChange } from './use-on-change.mjs';
 import { cancelSync, sync } from '../frameloop/index.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
 function useCombineMotionValues(values, combineValues) {
     /**
@@ -23,7 +23,14 @@ function useCombineMotionValues(values, combineValues) {
      * Subscribe to all motion values found within the template. Whenever any of them change,
      * schedule an update.
      */
-    useMultiOnChange(values, () => sync.update(updateValue, false, true), () => cancelSync.update(updateValue));
+    useIsomorphicLayoutEffect(() => {
+        const scheduleUpdate = () => sync.update(updateValue, false, true);
+        const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
+        return () => {
+            subscriptions.forEach((unsubscribe) => unsubscribe());
+            cancelSync.update(updateValue);
+        };
+    });
     return value;
 }
 

package/dist/es/value/use-spring.mjs

@@ -1,9 +1,9 @@
 import { useContext, useRef, useMemo } from 'react';
 import { isMotionValue } from './utils/is-motion-value.mjs';
 import { useMotionValue } from './use-motion-value.mjs';
-import { useOnChange } from './use-on-change.mjs';
 import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 import { animate } from '../animation/legacy-popmotion/index.mjs';
+import { useIsomorphicLayoutEffect } from '../utils/use-isomorphic-effect.mjs';
 
 /**
  * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
@@ -49,7 +49,11 @@ function useSpring(source, config = {}) {
             return value.get();
         });
     }, [JSON.stringify(config)]);
-    useOnChange(source, (v) => value.set(parseFloat(v)));
+    useIsomorphicLayoutEffect(() => {
+        if (isMotionValue(source)) {
+            return source.on("change", (v) => value.set(parseFloat(v)));
+        }
+    }, [value]);
     return value;
 }
 

package/dist/framer-motion.dev.js

@@ -88,7 +88,6 @@
                 visualElement.animationState.animateChanges();
             }
         });
-        useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notify("Unmount"), []);
         return visualElement;
     }
 
@@ -2060,7 +2059,7 @@
              * 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 = "8.0.3";
+            this.version = "8.0.4";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -2174,14 +2173,6 @@
          * }
          * ```
          *
-         * @privateRemarks
-         *
-         * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
-         *
-         * ```jsx
-         * useOnChange(x, () => {})
-         * ```
-         *
          * @param subscriber - A function that receives the latest value.
          * @returns A function that, when called, will cancel this subscription.
          *
@@ -2194,7 +2185,22 @@
             if (!this.events[eventName]) {
                 this.events[eventName] = new SubscriptionManager();
             }
-            return this.events[eventName].add(callback);
+            const unsubscribe = this.events[eventName].add(callback);
+            if (eventName === "change") {
+                return () => {
+                    unsubscribe();
+                    /**
+                     * If we have no more change listeners by the start
+                     * of the next frame, stop active animations.
+                     */
+                    sync.read(() => {
+                        if (!this.events.change.getSize()) {
+                            this.stop();
+                        }
+                    });
+                };
+            }
+            return unsubscribe;
         }
         clearListeners() {
             for (const eventManagers in this.events) {
@@ -5878,7 +5884,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.3 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.0.4 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5922,7 +5928,6 @@
         "AnimationStart",
         "AnimationComplete",
         "Update",
-        "Unmount",
         "BeforeLayoutMeasure",
         "LayoutMeasure",
         "LayoutAnimationStart",
@@ -6268,11 +6273,12 @@
          */
         addValue(key, value) {
             // Remove existing value if it exists
-            if (this.hasValue(key))
+            if (value !== this.values.get(key)) {
                 this.removeValue(key);
+                this.bindToMotionValue(key, value);
+            }
             this.values.set(key, value);
             this.latestValues[key] = value.get();
-            this.bindToMotionValue(key, value);
         }
         /**
          * Remove a motion value and unbind any active subscriptions.
@@ -6291,10 +6297,6 @@
         hasValue(key) {
             return this.values.has(key);
         }
-        /**
-         * Get a motion value for this key. If called with a default
-         * value, we'll create one if none exists.
-         */
         getValue(key, defaultValue) {
             if (this.props.values && this.props.values[key]) {
                 return this.props.values[key];
@@ -8994,24 +8996,6 @@
         return useImmediate ? interpolator(inputValue) : interpolator;
     }
 
-    function useOnChange(value, callback) {
-        useIsomorphicLayoutEffect(() => {
-            if (isMotionValue(value)) {
-                callback(value.get());
-                return value.on("change", callback);
-            }
-        }, [value, callback]);
-    }
-    function useMultiOnChange(values, handler, cleanup) {
-        useIsomorphicLayoutEffect(() => {
-            const subscriptions = values.map((value) => value.on("change", handler));
-            return () => {
-                subscriptions.forEach((unsubscribe) => unsubscribe());
-                cleanup();
-            };
-        });
-    }
-
     function useCombineMotionValues(values, combineValues) {
         /**
          * Initialise the returned motion value. This remains the same between renders.
@@ -9033,7 +9017,14 @@
          * Subscribe to all motion values found within the template. Whenever any of them change,
          * schedule an update.
          */
-        useMultiOnChange(values, () => sync.update(updateValue, false, true), () => cancelSync.update(updateValue));
+        useIsomorphicLayoutEffect(() => {
+            const scheduleUpdate = () => sync.update(updateValue, false, true);
+            const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
+            return () => {
+                subscriptions.forEach((unsubscribe) => unsubscribe());
+                cancelSync.update(updateValue);
+            };
+        });
         return value;
     }
 
@@ -9193,7 +9184,11 @@
                 return value.get();
             });
         }, [JSON.stringify(config)]);
-        useOnChange(source, (v) => value.set(parseFloat(v)));
+        useIsomorphicLayoutEffect(() => {
+            if (isMotionValue(source)) {
+                return source.on("change", (v) => value.set(parseFloat(v)));
+            }
+        }, [value]);
         return value;
     }
 
@@ -9938,7 +9933,13 @@
     }
 
     function useMotionValueEvent(value, event, callback) {
-        useIsomorphicLayoutEffect(() => value.on(event, callback), [value, event, callback]);
+        /**
+         * useInsertionEffect will create subscriptions before any other
+         * effects will run. Effects run upwards through the tree so it
+         * can be that binding a useLayoutEffect higher up the tree can
+         * miss changes from lower down the tree.
+         */
+        React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
     }
 
     /**