motion-v 1.0.2 → 1.1.0-alpha.1

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

@@ -1,9 +1,8 @@
 import { onMounted, watch } from "vue";
 import { warning } from "hey-listen";
 import { isSSR } from "../utils/is.mjs";
-import { scroll } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
-import { motionValue } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
-import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
+import { scroll } from "../external/.pnpm/framer-motion@12.10.5/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { motionValue } from "../external/.pnpm/motion-dom@12.10.5/external/motion-dom/dist/es/value/index.mjs";
 function refWarning(name, ref) {
   warning(
     Boolean(!ref || ref.value),
@@ -27,35 +26,35 @@ function useScroll({
   onMounted(() => {
     refWarning("target", target);
     refWarning("container", container);
-  });
-  watch(
-    [() => container == null ? void 0 : container.value, () => target == null ? void 0 : target.value, () => options.offset],
-    (n, o, onCleanup) => {
-      if (isSSR) {
-        return;
-      }
-      const cleanup = scroll(
-        (_progress, { x, y }) => {
-          values.scrollX.set(x.current);
-          values.scrollXProgress.set(x.progress);
-          values.scrollY.set(y.current);
-          values.scrollYProgress.set(y.progress);
-        },
-        {
-          ...options,
-          container: (container == null ? void 0 : container.value) ?? void 0,
-          target: (target == null ? void 0 : target.value) ?? void 0
+    watch(
+      [() => container == null ? void 0 : container.value, () => target == null ? void 0 : target.value, () => options.offset],
+      (n, o, onCleanup) => {
+        if (isSSR) {
+          return;
         }
-      );
-      onCleanup(() => {
-        cleanup();
-      });
-    },
-    {
-      immediate: true,
-      flush: "post"
-    }
-  );
+        const cleanup = scroll(
+          (_progress, { x, y }) => {
+            values.scrollX.set(x.current);
+            values.scrollXProgress.set(x.progress);
+            values.scrollY.set(y.current);
+            values.scrollYProgress.set(y.progress);
+          },
+          {
+            ...options,
+            container: (container == null ? void 0 : container.value) ?? void 0,
+            target: (target == null ? void 0 : target.value) ?? void 0
+          }
+        );
+        onCleanup(() => {
+          cleanup();
+        });
+      },
+      {
+        immediate: true,
+        flush: "post"
+      }
+    );
+  });
   return values;
 }
 export {

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

@@ -1,9 +1,8 @@
 import { watch, isRef } from "vue";
-import { animateValue } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
-import { motionValue } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
-import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { frame, frameData } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { animateValue } from "../external/.pnpm/motion-dom@12.10.5/external/motion-dom/dist/es/animation/JSAnimation.mjs";
+import { motionValue } from "../external/.pnpm/motion-dom@12.10.5/external/motion-dom/dist/es/value/index.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
+import { frame, frameData } from "../external/.pnpm/motion-dom@12.10.5/external/motion-dom/dist/es/frameloop/frame.mjs";
 function toNumber(v) {
   if (typeof v === "number")
     return v;

package/dist/es/value/use-time.d.ts

@@ -1 +1 @@
-export declare function useTime(): import('motion-dom').MotionValue<number>;
+export declare function useTime(): import('framer-motion/dom').MotionValue<number>;

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

@@ -1,6 +1,5 @@
 import { useAnimationFrame } from "../utils/use-animation-frame.mjs";
-import { motionValue } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
-import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
+import { motionValue } from "../external/.pnpm/motion-dom@12.10.5/external/motion-dom/dist/es/value/index.mjs";
 function useTime() {
   const time = motionValue(0);
   useAnimationFrame((t) => time.set(t));

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

@@ -1,7 +1,7 @@
 import { useComputed } from "./use-computed.mjs";
 import { useCombineMotionValues } from "./use-combine-values.mjs";
 import { isRef, computed } from "vue";
-import { transform } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/transform.mjs";
+import { transform } from "../external/.pnpm/motion-dom@12.10.5/external/motion-dom/dist/es/utils/transform.mjs";
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
   if (typeof input === "function") {
     return useComputed(input);

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

@@ -1,7 +1,6 @@
 import { useMotionValueEvent } from "./use-motion-value-event.mjs";
-import { motionValue } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
-import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { frame } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/motion-dom@12.10.5/external/motion-dom/dist/es/value/index.mjs";
+import { frame } from "../external/.pnpm/motion-dom@12.10.5/external/motion-dom/dist/es/frameloop/frame.mjs";
 function useVelocity(value) {
   const velocity = motionValue(value.getVelocity());
   const updateVelocity = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "1.0.2",
+  "version": "1.1.0-alpha.1",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -67,9 +67,8 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.0.0",
-    "framer-motion": "12.5.0",
-    "hey-listen": "^1.0.8",
-    "motion-dom": "^12.5.0"
+    "framer-motion": "12.10.5",
+    "hey-listen": "^1.0.8"
   },
   "devDependencies": {
     "vue": "3.4.38"

package/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs

@@ -1,247 +0,0 @@
-import "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { noop } from "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/noop.mjs";
-import { millisecondsToSeconds, secondsToMilliseconds } from "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/time-conversion.mjs";
-import { isGenerator } from "../../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/animation/generators/utils/is-generator.mjs";
-import { attachTimeline } from "../../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/animation/waapi/utils/attach-timeline.mjs";
-import { isWaapiSupportedEasing } from "../../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/animation/waapi/utils/easing.mjs";
-import { supportsLinearEasing } from "../../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/utils/supports/linear-easing.mjs";
-import { anticipate } from "../../easing/anticipate.mjs";
-import { backInOut } from "../../easing/back.mjs";
-import { circInOut } from "../../easing/circ.mjs";
-import { DOMKeyframesResolver } from "../../render/dom/DOMKeyframesResolver.mjs";
-import { BaseAnimation } from "./BaseAnimation.mjs";
-import { MainThreadAnimation } from "./MainThreadAnimation.mjs";
-import { acceleratedValues } from "./utils/accelerated-values.mjs";
-import { startWaapiAnimation } from "./waapi/index.mjs";
-import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe.mjs";
-import { supportsWaapi } from "./waapi/utils/supports-waapi.mjs";
-const sampleDelta = 10;
-const maxDuration = 2e4;
-function requiresPregeneratedKeyframes(options) {
-  return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
-}
-function pregenerateKeyframes(keyframes, options) {
-  const sampleAnimation = new MainThreadAnimation({
-    ...options,
-    keyframes,
-    repeat: 0,
-    delay: 0,
-    isGenerator: true
-  });
-  let state = { done: false, value: keyframes[0] };
-  const pregeneratedKeyframes = [];
-  let t = 0;
-  while (!state.done && t < maxDuration) {
-    state = sampleAnimation.sample(t);
-    pregeneratedKeyframes.push(state.value);
-    t += sampleDelta;
-  }
-  return {
-    times: void 0,
-    keyframes: pregeneratedKeyframes,
-    duration: t - sampleDelta,
-    ease: "linear"
-  };
-}
-const unsupportedEasingFunctions = {
-  anticipate,
-  backInOut,
-  circInOut
-};
-function isUnsupportedEase(key) {
-  return key in unsupportedEasingFunctions;
-}
-class AcceleratedAnimation extends BaseAnimation {
-  constructor(options) {
-    super(options);
-    const { name, motionValue, element, keyframes } = this.options;
-    this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue, element);
-    this.resolver.scheduleResolve();
-  }
-  initPlayback(keyframes, finalKeyframe) {
-    let { duration = 300, times, ease, type, motionValue, name, startTime } = this.options;
-    if (!motionValue.owner || !motionValue.owner.current) {
-      return false;
-    }
-    if (typeof ease === "string" && supportsLinearEasing() && isUnsupportedEase(ease)) {
-      ease = unsupportedEasingFunctions[ease];
-    }
-    if (requiresPregeneratedKeyframes(this.options)) {
-      const { onComplete, onUpdate, motionValue: motionValue2, element, ...options } = this.options;
-      const pregeneratedAnimation = pregenerateKeyframes(keyframes, options);
-      keyframes = pregeneratedAnimation.keyframes;
-      if (keyframes.length === 1) {
-        keyframes[1] = keyframes[0];
-      }
-      duration = pregeneratedAnimation.duration;
-      times = pregeneratedAnimation.times;
-      ease = pregeneratedAnimation.ease;
-      type = "keyframes";
-    }
-    const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
-    animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
-    if (this.pendingTimeline) {
-      attachTimeline(animation, this.pendingTimeline);
-      this.pendingTimeline = void 0;
-    } else {
-      animation.onfinish = () => {
-        const { onComplete } = this.options;
-        motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-        onComplete && onComplete();
-        this.cancel();
-        this.resolveFinishedPromise();
-      };
-    }
-    return {
-      animation,
-      duration,
-      times,
-      type,
-      ease,
-      keyframes
-    };
-  }
-  get duration() {
-    const { resolved } = this;
-    if (!resolved)
-      return 0;
-    const { duration } = resolved;
-    return millisecondsToSeconds(duration);
-  }
-  get time() {
-    const { resolved } = this;
-    if (!resolved)
-      return 0;
-    const { animation } = resolved;
-    return millisecondsToSeconds(animation.currentTime || 0);
-  }
-  set time(newTime) {
-    const { resolved } = this;
-    if (!resolved)
-      return;
-    const { animation } = resolved;
-    animation.currentTime = secondsToMilliseconds(newTime);
-  }
-  get speed() {
-    const { resolved } = this;
-    if (!resolved)
-      return 1;
-    const { animation } = resolved;
-    return animation.playbackRate;
-  }
-  set speed(newSpeed) {
-    const { resolved } = this;
-    if (!resolved)
-      return;
-    const { animation } = resolved;
-    animation.playbackRate = newSpeed;
-  }
-  get state() {
-    const { resolved } = this;
-    if (!resolved)
-      return "idle";
-    const { animation } = resolved;
-    return animation.playState;
-  }
-  get startTime() {
-    const { resolved } = this;
-    if (!resolved)
-      return null;
-    const { animation } = resolved;
-    return animation.startTime;
-  }
-  /**
-   * Replace the default DocumentTimeline with another AnimationTimeline.
-   * Currently used for scroll animations.
-   */
-  attachTimeline(timeline) {
-    if (!this._resolved) {
-      this.pendingTimeline = timeline;
-    } else {
-      const { resolved } = this;
-      if (!resolved)
-        return noop;
-      const { animation } = resolved;
-      attachTimeline(animation, timeline);
-    }
-    return noop;
-  }
-  play() {
-    if (this.isStopped)
-      return;
-    const { resolved } = this;
-    if (!resolved)
-      return;
-    const { animation } = resolved;
-    if (animation.playState === "finished") {
-      this.updateFinishedPromise();
-    }
-    animation.play();
-  }
-  pause() {
-    const { resolved } = this;
-    if (!resolved)
-      return;
-    const { animation } = resolved;
-    animation.pause();
-  }
-  stop() {
-    this.resolver.cancel();
-    this.isStopped = true;
-    if (this.state === "idle")
-      return;
-    this.resolveFinishedPromise();
-    this.updateFinishedPromise();
-    const { resolved } = this;
-    if (!resolved)
-      return;
-    const { animation, keyframes, duration, type, ease, times } = resolved;
-    if (animation.playState === "idle" || animation.playState === "finished") {
-      return;
-    }
-    if (this.time) {
-      const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
-      const sampleAnimation = new MainThreadAnimation({
-        ...options,
-        keyframes,
-        duration,
-        type,
-        ease,
-        times,
-        isGenerator: true
-      });
-      const sampleTime = secondsToMilliseconds(this.time);
-      motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
-    }
-    const { onStop } = this.options;
-    onStop && onStop();
-    this.cancel();
-  }
-  complete() {
-    const { resolved } = this;
-    if (!resolved)
-      return;
-    resolved.animation.finish();
-  }
-  cancel() {
-    const { resolved } = this;
-    if (!resolved)
-      return;
-    resolved.animation.cancel();
-  }
-  static supports(options) {
-    const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
-    if (!motionValue || !motionValue.owner || !(motionValue.owner.current instanceof HTMLElement)) {
-      return false;
-    }
-    const { onUpdate, transformTemplate } = motionValue.owner.getProps();
-    return supportsWaapi() && name && acceleratedValues.has(name) && /**
-     * If we're outputting values to onUpdate then we can't use WAAPI as there's
-     * no way to read the value from WAAPI every frame.
-     */
-    !onUpdate && !transformTemplate && !repeatDelay && repeatType !== "mirror" && damping !== 0 && type !== "inertia";
-  }
-}
-export {
-  AcceleratedAnimation
-};

package/dist/es/external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animators/BaseAnimation.mjs

@@ -1,102 +0,0 @@
-import "../../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { time } from "../../../../../../../motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/sync-time.mjs";
-import { flushKeyframeResolvers } from "../../render/utils/KeyframesResolver.mjs";
-import { canAnimate } from "./utils/can-animate.mjs";
-import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe.mjs";
-const MAX_RESOLVE_DELAY = 40;
-class BaseAnimation {
-  constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
-    this.isStopped = false;
-    this.hasAttemptedResolve = false;
-    this.createdAt = time.now();
-    this.options = {
-      autoplay,
-      delay,
-      type,
-      repeat,
-      repeatDelay,
-      repeatType,
-      ...options
-    };
-    this.updateFinishedPromise();
-  }
-  /**
-   * This method uses the createdAt and resolvedAt to calculate the
-   * animation startTime. *Ideally*, we would use the createdAt time as t=0
-   * as the following frame would then be the first frame of the animation in
-   * progress, which would feel snappier.
-   *
-   * However, if there's a delay (main thread work) between the creation of
-   * the animation and the first commited frame, we prefer to use resolvedAt
-   * to avoid a sudden jump into the animation.
-   */
-  calcStartTime() {
-    if (!this.resolvedAt)
-      return this.createdAt;
-    return this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY ? this.resolvedAt : this.createdAt;
-  }
-  /**
-   * A getter for resolved data. If keyframes are not yet resolved, accessing
-   * this.resolved will synchronously flush all pending keyframe resolvers.
-   * This is a deoptimisation, but at its worst still batches read/writes.
-   */
-  get resolved() {
-    if (!this._resolved && !this.hasAttemptedResolve) {
-      flushKeyframeResolvers();
-    }
-    return this._resolved;
-  }
-  /**
-   * A method to be called when the keyframes resolver completes. This method
-   * will check if its possible to run the animation and, if not, skip it.
-   * Otherwise, it will call initPlayback on the implementing class.
-   */
-  onKeyframesResolved(keyframes, finalKeyframe) {
-    this.resolvedAt = time.now();
-    this.hasAttemptedResolve = true;
-    const { name, type, velocity, delay, onComplete, onUpdate, isGenerator } = this.options;
-    if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
-      if (!delay) {
-        onUpdate && onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-        onComplete && onComplete();
-        this.resolveFinishedPromise();
-        return;
-      } else {
-        this.options.duration = 0;
-      }
-    }
-    const resolvedAnimation = this.initPlayback(keyframes, finalKeyframe);
-    if (resolvedAnimation === false)
-      return;
-    this._resolved = {
-      keyframes,
-      finalKeyframe,
-      ...resolvedAnimation
-    };
-    this.onPostResolved();
-  }
-  onPostResolved() {
-  }
-  /**
-   * Allows the returned animation to be awaited or promise-chained. Currently
-   * resolves when the animation finishes at all but in a future update could/should
-   * reject if its cancels.
-   */
-  then(resolve, reject) {
-    return this.currentFinishedPromise.then(resolve, reject);
-  }
-  flatten() {
-    if (!this.options.allowFlatten)
-      return;
-    this.options.type = "keyframes";
-    this.options.ease = "linear";
-  }
-  updateFinishedPromise() {
-    this.currentFinishedPromise = new Promise((resolve) => {
-      this.resolveFinishedPromise = resolve;
-    });
-  }
-}
-export {
-  BaseAnimation
-};