motion-v 0.13.0-beta.1 → 0.13.0-beta.3

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

@@ -5,8 +5,8 @@ export interface UseScrollOptions extends Omit<ScrollInfoOptions, 'container' |
     target?: Ref<HTMLElement | null>;
 }
 export declare function useScroll({ container, target, ...options }?: UseScrollOptions): {
-    scrollX: import('framer-motion/dom').MotionValue<number>;
-    scrollY: import('framer-motion/dom').MotionValue<number>;
-    scrollXProgress: import('framer-motion/dom').MotionValue<number>;
-    scrollYProgress: import('framer-motion/dom').MotionValue<number>;
+    scrollX: import('motion-dom').MotionValue<number>;
+    scrollY: import('motion-dom').MotionValue<number>;
+    scrollXProgress: import('motion-dom').MotionValue<number>;
+    scrollYProgress: import('motion-dom').MotionValue<number>;
 };

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

@@ -1,7 +1,7 @@
-import { onMounted, onUnmounted, watch } from "vue";
+import { onMounted, watch } from "vue";
 import { warning } from "hey-listen";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/value/index.mjs";
-import { scroll } from "../external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { scroll } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { motionValue } from "motion-dom";
 function refWarning(name, ref) {
   warning(
     Boolean(!ref || ref.value),
@@ -22,32 +22,34 @@ function useScroll({
   ...options
 } = {}) {
   const values = createScrollMotionValues();
-  let cleanup;
-  const setupScroll = () => {
-    cleanup == null ? void 0 : cleanup();
-    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
-      }
-    );
-  };
   onMounted(() => {
     refWarning("target", target);
     refWarning("container", container);
-    setupScroll();
   });
-  onUnmounted(() => cleanup == null ? void 0 : cleanup());
   watch(
-    () => [container == null ? void 0 : container.value, target == null ? void 0 : target.value, options.offset],
-    setupScroll
+    [container, target, () => options.offset],
+    (n, o, onCleanup) => {
+      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;
 }

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

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

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

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

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

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

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

@@ -1,14 +1,12 @@
 import { useComputed } from "./use-computed.mjs";
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { computed, isRef } from "vue";
-import { transform } from "../external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/utils/transform.mjs";
+import { isRef, computed } from "vue";
+import { transform } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/transform.mjs";
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
   if (typeof input === "function") {
     return useComputed(input);
   }
-  const transformer = computed(() => {
-    return typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : transform(isRef(inputRangeOrTransformer) ? inputRangeOrTransformer.value : inputRangeOrTransformer, outputRange, options);
-  });
+  const transformer = typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : isRef(inputRangeOrTransformer) ? computed(() => transform(inputRangeOrTransformer.value, outputRange, options)) : transform(inputRangeOrTransformer, outputRange, options);
   return Array.isArray(input) ? useListTransform(
     input,
     transformer

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

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

package/package.json

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

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/frameloop/batcher.mjs

@@ -1,63 +0,0 @@
-import { stepsOrder } from "./order.mjs";
-import { createRenderStep } from "./render-step.mjs";
-const maxElapsed = 40;
-function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-  let runNextFrame = false;
-  let useDefaultElapsed = true;
-  const state = {
-    delta: 0,
-    timestamp: 0,
-    isProcessing: false
-  };
-  const flagRunNextFrame = () => runNextFrame = true;
-  const steps = stepsOrder.reduce((acc, key) => {
-    acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : void 0);
-    return acc;
-  }, {});
-  const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
-  const processBatch = () => {
-    const timestamp = performance.now();
-    runNextFrame = false;
-    {
-      state.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
-    }
-    state.timestamp = timestamp;
-    state.isProcessing = true;
-    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 };
-}
-export {
-  createRenderBatcher
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/frameloop/frame.mjs

@@ -1,10 +0,0 @@
-import "../../../../../../motion-utils@12.4.10/external/motion-utils/dist/es/errors.mjs";
-import { noop } from "../../../../../../motion-utils@12.4.10/external/motion-utils/dist/es/noop.mjs";
-import { createRenderBatcher } from "./batcher.mjs";
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
-export {
-  cancelFrame,
-  frame,
-  frameData,
-  frameSteps
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/frameloop/index-legacy.mjs

@@ -1,11 +0,0 @@
-import { stepsOrder } from "./order.mjs";
-import { frame, cancelFrame } from "./frame.mjs";
-const sync = frame;
-const cancelSync = stepsOrder.reduce((acc, key) => {
-  acc[key] = (process) => cancelFrame(process);
-  return acc;
-}, {});
-export {
-  cancelSync,
-  sync
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/frameloop/microtask.mjs

@@ -1,6 +0,0 @@
-import { createRenderBatcher } from "./batcher.mjs";
-const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
-export {
-  cancelMicrotask,
-  microtask
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/frameloop/order.mjs

@@ -1,17 +0,0 @@
-const stepsOrder = [
-  "read",
-  // Read
-  "resolveKeyframes",
-  // Write/Read/Write/Read
-  "update",
-  // Compute
-  "preRender",
-  // Compute
-  "render",
-  // Write
-  "postRender"
-  // Compute
-];
-export {
-  stepsOrder
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/frameloop/render-step.mjs

@@ -1,70 +0,0 @@
-import { statsBuffer } from "../stats/buffer.mjs";
-function createRenderStep(runNextFrame, stepName) {
-  let thisFrame = /* @__PURE__ */ new Set();
-  let nextFrame = /* @__PURE__ */ new Set();
-  let isProcessing = false;
-  let flushNextFrame = false;
-  const toKeepAlive = /* @__PURE__ */ new WeakSet();
-  let latestFrameData = {
-    delta: 0,
-    timestamp: 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 (isProcessing) {
-        flushNextFrame = true;
-        return;
-      }
-      isProcessing = true;
-      [thisFrame, nextFrame] = [nextFrame, thisFrame];
-      thisFrame.forEach(triggerCallback);
-      if (stepName && statsBuffer.value) {
-        statsBuffer.value.frameloop[stepName].push(numCalls);
-      }
-      numCalls = 0;
-      thisFrame.clear();
-      isProcessing = false;
-      if (flushNextFrame) {
-        flushNextFrame = false;
-        step.process(frameData);
-      }
-    }
-  };
-  return step;
-}
-export {
-  createRenderStep
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/frameloop/sync-time.mjs

@@ -1,21 +0,0 @@
-import { MotionGlobalConfig } from "../utils/GlobalConfig.mjs";
-import { frameData } from "./frame.mjs";
-let now;
-function clearTime() {
-  now = void 0;
-}
-const time = {
-  now: () => {
-    if (now === void 0) {
-      time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now());
-    }
-    return now;
-  },
-  set: (newTime) => {
-    now = newTime;
-    queueMicrotask(clearTime);
-  }
-};
-export {
-  time
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/stats/buffer.mjs

@@ -1,7 +0,0 @@
-const statsBuffer = {
-  value: null,
-  addProjectionMetrics: null
-};
-export {
-  statsBuffer
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/utils/GlobalConfig.mjs

@@ -1,7 +0,0 @@
-const MotionGlobalConfig = {
-  skipAnimations: false,
-  useManualTiming: false
-};
-export {
-  MotionGlobalConfig
-};

package/dist/es/external/.pnpm/framer-motion@12.4.10/external/framer-motion/dist/es/value/index.mjs

@@ -1,282 +0,0 @@
-import { time } from "../frameloop/sync-time.mjs";
-import { SubscriptionManager } from "../utils/subscription-manager.mjs";
-import { velocityPerSecond } from "../utils/velocity-per-second.mjs";
-import { warnOnce } from "../utils/warn-once.mjs";
-import { frame } from "../frameloop/frame.mjs";
-const MAX_VELOCITY_DELTA = 30;
-const isFloat = (value) => {
-  return !isNaN(parseFloat(value));
-};
-const collectMotionValues = {
-  current: void 0
-};
-class MotionValue {
-  /**
-   * @param init - The initiating value
-   * @param config - Optional configuration options
-   *
-   * -  `transformer`: A function to transform incoming values with.
-   *
-   * @internal
-   */
-  constructor(init, options = {}) {
-    this.version = "12.4.10";
-    this.canTrackVelocity = null;
-    this.events = {};
-    this.updateAndNotify = (v, render = true) => {
-      const currentTime = time.now();
-      if (this.updatedAt !== currentTime) {
-        this.setPrevFrameValue();
-      }
-      this.prev = this.current;
-      this.setCurrent(v);
-      if (this.current !== this.prev && this.events.change) {
-        this.events.change.notify(this.current);
-      }
-      if (render && this.events.renderRequest) {
-        this.events.renderRequest.notify(this.current);
-      }
-    };
-    this.hasAnimated = false;
-    this.setCurrent(init);
-    this.owner = options.owner;
-  }
-  setCurrent(current) {
-    this.current = current;
-    this.updatedAt = time.now();
-    if (this.canTrackVelocity === null && current !== void 0) {
-      this.canTrackVelocity = isFloat(this.current);
-    }
-  }
-  setPrevFrameValue(prevFrameValue = this.current) {
-    this.prevFrameValue = prevFrameValue;
-    this.prevUpdatedAt = this.updatedAt;
-  }
-  /**
-   * Adds a function that will be notified when the `MotionValue` is updated.
-   *
-   * 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..
-   *
-   * ```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.on("change", updateOpacity)
-   *     const unsubscribeY = y.on("change", updateOpacity)
-   *
-   *     return () => {
-   *       unsubscribeX()
-   *       unsubscribeY()
-   *     }
-   *   }, [])
-   *
-   *   return <motion.div style={{ x }} />
-   * }
-   * ```
-   *
-   * @param subscriber - A function that receives the latest value.
-   * @returns A function that, when called, will cancel this subscription.
-   *
-   * @deprecated
-   */
-  onChange(subscription) {
-    if (process.env.NODE_ENV !== "production") {
-      warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
-    }
-    return this.on("change", subscription);
-  }
-  on(eventName, callback) {
-    if (!this.events[eventName]) {
-      this.events[eventName] = new SubscriptionManager();
-    }
-    const unsubscribe = this.events[eventName].add(callback);
-    if (eventName === "change") {
-      return () => {
-        unsubscribe();
-        frame.read(() => {
-          if (!this.events.change.getSize()) {
-            this.stop();
-          }
-        });
-      };
-    }
-    return unsubscribe;
-  }
-  clearListeners() {
-    for (const eventManagers in this.events) {
-      this.events[eventManagers].clear();
-    }
-  }
-  /**
-   * Attaches a passive effect to the `MotionValue`.
-   *
-   * @internal
-   */
-  attach(passiveEffect, stopPassiveEffect) {
-    this.passiveEffect = passiveEffect;
-    this.stopPassiveEffect = stopPassiveEffect;
-  }
-  /**
-   * Sets the state of the `MotionValue`.
-   *
-   * @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
-   */
-  set(v, render = true) {
-    if (!render || !this.passiveEffect) {
-      this.updateAndNotify(v, render);
-    } else {
-      this.passiveEffect(v, this.updateAndNotify);
-    }
-  }
-  setWithVelocity(prev, current, delta) {
-    this.set(current);
-    this.prev = void 0;
-    this.prevFrameValue = prev;
-    this.prevUpdatedAt = this.updatedAt - delta;
-  }
-  /**
-   * Set the state of the `MotionValue`, stopping any active animations,
-   * effects, and resets velocity to `0`.
-   */
-  jump(v, endAnimation = true) {
-    this.updateAndNotify(v);
-    this.prev = v;
-    this.prevUpdatedAt = this.prevFrameValue = void 0;
-    endAnimation && this.stop();
-    if (this.stopPassiveEffect)
-      this.stopPassiveEffect();
-  }
-  /**
-   * Returns the latest state of `MotionValue`
-   *
-   * @returns - The latest state of `MotionValue`
-   *
-   * @public
-   */
-  get() {
-    if (collectMotionValues.current) {
-      collectMotionValues.current.push(this);
-    }
-    return this.current;
-  }
-  /**
-   * @public
-   */
-  getPrevious() {
-    return this.prev;
-  }
-  /**
-   * Returns the latest velocity of `MotionValue`
-   *
-   * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-   *
-   * @public
-   */
-  getVelocity() {
-    const currentTime = time.now();
-    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
-      return 0;
-    }
-    const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
-    return velocityPerSecond(parseFloat(this.current) - parseFloat(this.prevFrameValue), delta);
-  }
-  /**
-   * Registers a new animation to control this `MotionValue`. Only one
-   * animation can drive a `MotionValue` at one time.
-   *
-   * ```jsx
-   * value.start()
-   * ```
-   *
-   * @param animation - A function that starts the provided animation
-   *
-   * @internal
-   */
-  start(startAnimation) {
-    this.stop();
-    return new Promise((resolve) => {
-      this.hasAnimated = true;
-      this.animation = startAnimation(resolve);
-      if (this.events.animationStart) {
-        this.events.animationStart.notify();
-      }
-    }).then(() => {
-      if (this.events.animationComplete) {
-        this.events.animationComplete.notify();
-      }
-      this.clearAnimation();
-    });
-  }
-  /**
-   * Stop the currently active animation.
-   *
-   * @public
-   */
-  stop() {
-    if (this.animation) {
-      this.animation.stop();
-      if (this.events.animationCancel) {
-        this.events.animationCancel.notify();
-      }
-    }
-    this.clearAnimation();
-  }
-  /**
-   * Returns `true` if this value is currently animating.
-   *
-   * @public
-   */
-  isAnimating() {
-    return !!this.animation;
-  }
-  clearAnimation() {
-    delete this.animation;
-  }
-  /**
-   * 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
-   */
-  destroy() {
-    this.clearListeners();
-    this.stop();
-    if (this.stopPassiveEffect) {
-      this.stopPassiveEffect();
-    }
-  }
-}
-function motionValue(init, options) {
-  return new MotionValue(init, options);
-}
-export {
-  MotionValue,
-  collectMotionValues,
-  motionValue
-};