New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vueuse/motion
Advanced tools
@vueuse/motion - npm Package Compare versions
Comparing version 1.1.5 to 1.1.6
| /*! | ||
| * @vueuse/motion v1.1.4 | ||
| * @vueuse/motion v1.1.5 | ||
| * (c) 2021 | ||
@@ -162,4 +162,2 @@ * @license MIT | ||
| * `MotionValue` is used to track the state and velocity of motion values. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -170,6 +168,2 @@ class MotionValue { | ||
| * @param config - Optional configuration options | ||
| * | ||
| * - `transformer`: A function to transform incoming values with. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -179,4 +173,2 @@ constructor(init) { | ||
| * Duration, in milliseconds, since last updating frame. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -186,4 +178,2 @@ this.timeDelta = 0; | ||
| * Timestamp of the last time this `MotionValue` was updated. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -193,4 +183,2 @@ this.lastUpdated = 0; | ||
| * Functions to notify when the `MotionValue` updates. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -200,14 +188,14 @@ this.updateSubscribers = new SubscriptionManager(); | ||
| * Functions to notify when the `MotionValue` updates and `render` is set to `true`. | ||
| * | ||
| * @internal | ||
| */ | ||
| this.renderSubscribers = new SubscriptionManager(); | ||
| /** | ||
| * 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 | ||
| * other value types. | ||
| * Tracks whether this value can output a velocity. | ||
| */ | ||
| this.canTrackVelocity = false; | ||
| /** | ||
| * Update and notify `MotionValue` subscribers. | ||
| * | ||
| * @internal | ||
| * @param v | ||
| * @param render | ||
| */ | ||
| this.canTrackVelocity = false; | ||
| this.updateAndNotify = (v, render = true) => { | ||
@@ -232,7 +220,2 @@ this.prev = this.current; | ||
| * Schedule a velocity check for the next frame. | ||
| * | ||
| * This is an instanced and bound function to prevent generating a new | ||
| * function once per frame. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -243,7 +226,2 @@ this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck); | ||
| * This ensures velocity calculations return `0`. | ||
| * | ||
| * This is an instanced and bound function to prevent generating a new | ||
| * function once per frame. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -262,75 +240,2 @@ this.velocityCheck = ({ timestamp }) => { | ||
| * It returns a function that, when called, will cancel the subscription. | ||
| * | ||
| * When calling `onChange` inside a React component, it should be wrapped with the | ||
| * `useEffect` hook. As it returns an unsubscribe function, this should be returned | ||
| * from the `useEffect` function to ensure you don't add duplicate subscribers.. | ||
| * | ||
| * @library | ||
| * | ||
| * ```jsx | ||
| * function MyComponent() { | ||
| * const x = useMotionValue(0) | ||
| * const y = useMotionValue(0) | ||
| * const opacity = useMotionValue(1) | ||
| * | ||
| * useEffect(() => { | ||
| * function updateOpacity() { | ||
| * const maxXY = Math.max(x.get(), y.get()) | ||
| * const newOpacity = transform(maxXY, [0, 100], [1, 0]) | ||
| * opacity.set(newOpacity) | ||
| * } | ||
| * | ||
| * const unsubscribeX = x.onChange(updateOpacity) | ||
| * const unsubscribeY = y.onChange(updateOpacity) | ||
| * | ||
| * return () => { | ||
| * unsubscribeX() | ||
| * unsubscribeY() | ||
| * } | ||
| * }, []) | ||
| * | ||
| * return <Frame x={x} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @motion | ||
| * | ||
| * ```jsx | ||
| * export const MyComponent = () => { | ||
| * const x = useMotionValue(0) | ||
| * const y = useMotionValue(0) | ||
| * const opacity = useMotionValue(1) | ||
| * | ||
| * useEffect(() => { | ||
| * function updateOpacity() { | ||
| * const maxXY = Math.max(x.get(), y.get()) | ||
| * const newOpacity = transform(maxXY, [0, 100], [1, 0]) | ||
| * opacity.set(newOpacity) | ||
| * } | ||
| * | ||
| * const unsubscribeX = x.onChange(updateOpacity) | ||
| * const unsubscribeY = y.onChange(updateOpacity) | ||
| * | ||
| * return () => { | ||
| * unsubscribeX() | ||
| * unsubscribeY() | ||
| * } | ||
| * }, []) | ||
| * | ||
| * return <motion.div style={{ x }} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @internalremarks | ||
| * | ||
| * 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. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -345,7 +250,2 @@ onChange(subscription) { | ||
| * Adds a function that will be notified when the `MotionValue` requests a render. | ||
| * | ||
| * @param subscriber - A function that's provided the latest value. | ||
| * @returns A function that, when called, will cancel this subscription. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -360,3 +260,3 @@ onRenderRequest(subscription) { | ||
| * | ||
| * @internal | ||
| * @param passiveEffect | ||
| */ | ||
@@ -369,13 +269,4 @@ attach(passiveEffect) { | ||
| * | ||
| * @remarks | ||
| * | ||
| * ```jsx | ||
| * const x = useMotionValue(0) | ||
| * x.set(10) | ||
| * ``` | ||
| * | ||
| * @param latest - Latest value to set. | ||
| * @param render - Whether to notify render subscribers. Defaults to `true` | ||
| * | ||
| * @public | ||
| * @param v | ||
| * @param render | ||
| */ | ||
@@ -397,4 +288,2 @@ set(v, render = true) { | ||
| * @returns - The latest state of `MotionValue` | ||
| * | ||
| * @public | ||
| */ | ||
@@ -405,3 +294,5 @@ get() { | ||
| /** | ||
| * @public | ||
| * Get previous value. | ||
| * | ||
| * @returns - The previous latest state of `MotionValue` | ||
| */ | ||
@@ -415,4 +306,2 @@ getPrevious() { | ||
| * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -429,10 +318,2 @@ getVelocity() { | ||
| * animation can drive a `MotionValue` at one time. | ||
| * | ||
| * ```jsx | ||
| * value.start() | ||
| * ``` | ||
| * | ||
| * @param animation - A function that starts the provided animation | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -448,4 +329,2 @@ start(animation) { | ||
| * Stop the currently active animation. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -459,4 +338,2 @@ stop() { | ||
| * Returns `true` if this value is currently animating. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -471,8 +348,2 @@ isAnimating() { | ||
| * Destroy and clean up subscribers to this `MotionValue`. | ||
| * | ||
| * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically | ||
| * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually | ||
| * created a `MotionValue` via the `motionValue` function. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -485,5 +356,2 @@ destroy() { | ||
| } | ||
| /** | ||
| * @internal | ||
| */ | ||
| function getMotionValue(init) { | ||
@@ -1117,3 +985,3 @@ return new MotionValue(init); | ||
| const stop = (keys) => { | ||
| const { value } = motionValues; | ||
| const { value: _motionValues } = motionValues; | ||
| // Check if keys argument is defined | ||
@@ -1123,5 +991,5 @@ if (keys) { | ||
| const destroyKey = (key) => { | ||
| value[key].stop(); | ||
| value[key].destroy(); | ||
| delete value[key]; | ||
| _motionValues[key].stop(); | ||
| _motionValues[key].destroy(); | ||
| delete _motionValues[key]; | ||
| }; | ||
@@ -1131,3 +999,3 @@ if (isArray(keys)) { | ||
| keys.forEach((key) => { | ||
| if (value[key]) | ||
| if (_motionValues[key]) | ||
| destroyKey(key); | ||
@@ -1138,3 +1006,3 @@ }); | ||
| // If `keys` is a string, destroy the specified one | ||
| if (value[keys]) | ||
| if (_motionValues[keys]) | ||
| destroyKey(keys); | ||
@@ -1145,3 +1013,3 @@ } | ||
| // No keys specified, destroy all animations | ||
| Object.values(value).forEach((motionValue) => { | ||
| Object.values(_motionValues).forEach((motionValue) => { | ||
| motionValue.stop(); | ||
@@ -1148,0 +1016,0 @@ motionValue.destroy(); |
| /*! | ||
| * @vueuse/motion v1.1.4 | ||
| * @vueuse/motion v1.1.5 | ||
| * (c) 2021 | ||
@@ -162,4 +162,2 @@ * @license MIT | ||
| * `MotionValue` is used to track the state and velocity of motion values. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -170,6 +168,2 @@ class MotionValue { | ||
| * @param config - Optional configuration options | ||
| * | ||
| * - `transformer`: A function to transform incoming values with. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -179,4 +173,2 @@ constructor(init) { | ||
| * Duration, in milliseconds, since last updating frame. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -186,4 +178,2 @@ this.timeDelta = 0; | ||
| * Timestamp of the last time this `MotionValue` was updated. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -193,4 +183,2 @@ this.lastUpdated = 0; | ||
| * Functions to notify when the `MotionValue` updates. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -200,14 +188,14 @@ this.updateSubscribers = new SubscriptionManager(); | ||
| * Functions to notify when the `MotionValue` updates and `render` is set to `true`. | ||
| * | ||
| * @internal | ||
| */ | ||
| this.renderSubscribers = new SubscriptionManager(); | ||
| /** | ||
| * 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 | ||
| * other value types. | ||
| * Tracks whether this value can output a velocity. | ||
| */ | ||
| this.canTrackVelocity = false; | ||
| /** | ||
| * Update and notify `MotionValue` subscribers. | ||
| * | ||
| * @internal | ||
| * @param v | ||
| * @param render | ||
| */ | ||
| this.canTrackVelocity = false; | ||
| this.updateAndNotify = (v, render = true) => { | ||
@@ -232,7 +220,2 @@ this.prev = this.current; | ||
| * Schedule a velocity check for the next frame. | ||
| * | ||
| * This is an instanced and bound function to prevent generating a new | ||
| * function once per frame. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -243,7 +226,2 @@ this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck); | ||
| * This ensures velocity calculations return `0`. | ||
| * | ||
| * This is an instanced and bound function to prevent generating a new | ||
| * function once per frame. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -262,75 +240,2 @@ this.velocityCheck = ({ timestamp }) => { | ||
| * It returns a function that, when called, will cancel the subscription. | ||
| * | ||
| * When calling `onChange` inside a React component, it should be wrapped with the | ||
| * `useEffect` hook. As it returns an unsubscribe function, this should be returned | ||
| * from the `useEffect` function to ensure you don't add duplicate subscribers.. | ||
| * | ||
| * @library | ||
| * | ||
| * ```jsx | ||
| * function MyComponent() { | ||
| * const x = useMotionValue(0) | ||
| * const y = useMotionValue(0) | ||
| * const opacity = useMotionValue(1) | ||
| * | ||
| * useEffect(() => { | ||
| * function updateOpacity() { | ||
| * const maxXY = Math.max(x.get(), y.get()) | ||
| * const newOpacity = transform(maxXY, [0, 100], [1, 0]) | ||
| * opacity.set(newOpacity) | ||
| * } | ||
| * | ||
| * const unsubscribeX = x.onChange(updateOpacity) | ||
| * const unsubscribeY = y.onChange(updateOpacity) | ||
| * | ||
| * return () => { | ||
| * unsubscribeX() | ||
| * unsubscribeY() | ||
| * } | ||
| * }, []) | ||
| * | ||
| * return <Frame x={x} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @motion | ||
| * | ||
| * ```jsx | ||
| * export const MyComponent = () => { | ||
| * const x = useMotionValue(0) | ||
| * const y = useMotionValue(0) | ||
| * const opacity = useMotionValue(1) | ||
| * | ||
| * useEffect(() => { | ||
| * function updateOpacity() { | ||
| * const maxXY = Math.max(x.get(), y.get()) | ||
| * const newOpacity = transform(maxXY, [0, 100], [1, 0]) | ||
| * opacity.set(newOpacity) | ||
| * } | ||
| * | ||
| * const unsubscribeX = x.onChange(updateOpacity) | ||
| * const unsubscribeY = y.onChange(updateOpacity) | ||
| * | ||
| * return () => { | ||
| * unsubscribeX() | ||
| * unsubscribeY() | ||
| * } | ||
| * }, []) | ||
| * | ||
| * return <motion.div style={{ x }} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @internalremarks | ||
| * | ||
| * 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. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -345,7 +250,2 @@ onChange(subscription) { | ||
| * Adds a function that will be notified when the `MotionValue` requests a render. | ||
| * | ||
| * @param subscriber - A function that's provided the latest value. | ||
| * @returns A function that, when called, will cancel this subscription. | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -360,3 +260,3 @@ onRenderRequest(subscription) { | ||
| * | ||
| * @internal | ||
| * @param passiveEffect | ||
| */ | ||
@@ -369,13 +269,4 @@ attach(passiveEffect) { | ||
| * | ||
| * @remarks | ||
| * | ||
| * ```jsx | ||
| * const x = useMotionValue(0) | ||
| * x.set(10) | ||
| * ``` | ||
| * | ||
| * @param latest - Latest value to set. | ||
| * @param render - Whether to notify render subscribers. Defaults to `true` | ||
| * | ||
| * @public | ||
| * @param v | ||
| * @param render | ||
| */ | ||
@@ -397,4 +288,2 @@ set(v, render = true) { | ||
| * @returns - The latest state of `MotionValue` | ||
| * | ||
| * @public | ||
| */ | ||
@@ -405,3 +294,5 @@ get() { | ||
| /** | ||
| * @public | ||
| * Get previous value. | ||
| * | ||
| * @returns - The previous latest state of `MotionValue` | ||
| */ | ||
@@ -415,4 +306,2 @@ getPrevious() { | ||
| * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -429,10 +318,2 @@ getVelocity() { | ||
| * animation can drive a `MotionValue` at one time. | ||
| * | ||
| * ```jsx | ||
| * value.start() | ||
| * ``` | ||
| * | ||
| * @param animation - A function that starts the provided animation | ||
| * | ||
| * @internal | ||
| */ | ||
@@ -448,4 +329,2 @@ start(animation) { | ||
| * Stop the currently active animation. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -459,4 +338,2 @@ stop() { | ||
| * Returns `true` if this value is currently animating. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -471,8 +348,2 @@ isAnimating() { | ||
| * Destroy and clean up subscribers to this `MotionValue`. | ||
| * | ||
| * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically | ||
| * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually | ||
| * created a `MotionValue` via the `motionValue` function. | ||
| * | ||
| * @public | ||
| */ | ||
@@ -485,5 +356,2 @@ destroy() { | ||
| } | ||
| /** | ||
| * @internal | ||
| */ | ||
| function getMotionValue(init) { | ||
@@ -1117,3 +985,3 @@ return new MotionValue(init); | ||
| const stop = (keys) => { | ||
| const { value } = motionValues; | ||
| const { value: _motionValues } = motionValues; | ||
| // Check if keys argument is defined | ||
@@ -1123,5 +991,5 @@ if (keys) { | ||
| const destroyKey = (key) => { | ||
| value[key].stop(); | ||
| value[key].destroy(); | ||
| delete value[key]; | ||
| _motionValues[key].stop(); | ||
| _motionValues[key].destroy(); | ||
| delete _motionValues[key]; | ||
| }; | ||
@@ -1131,3 +999,3 @@ if (isArray(keys)) { | ||
| keys.forEach((key) => { | ||
| if (value[key]) | ||
| if (_motionValues[key]) | ||
| destroyKey(key); | ||
@@ -1138,3 +1006,3 @@ }); | ||
| // If `keys` is a string, destroy the specified one | ||
| if (value[keys]) | ||
| if (_motionValues[keys]) | ||
| destroyKey(keys); | ||
@@ -1145,3 +1013,3 @@ } | ||
| // No keys specified, destroy all animations | ||
| Object.values(value).forEach((motionValue) => { | ||
| Object.values(_motionValues).forEach((motionValue) => { | ||
| motionValue.stop(); | ||
@@ -1148,0 +1016,0 @@ motionValue.destroy(); |
| /*! | ||
| * @vueuse/motion v1.1.4 | ||
| * @vueuse/motion v1.1.5 | ||
| * (c) 2021 | ||
@@ -4,0 +4,0 @@ * @license MIT |
| { | ||
| "name": "@vueuse/motion", | ||
| "version": "1.1.5", | ||
| "version": "1.1.6", | ||
| "description": "🤹 Vue Composables putting your components in motion", | ||
@@ -5,0 +5,0 @@ "repository": "https://github.com/vueuse/motion", |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-3.2%
575437
- Lines of code
- decreased by-4.92%
13035
No dependency changes