motion-v 1.0.0-alpha.4 → 1.0.0-beta.1

package/dist/es/external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs

@@ -0,0 +1,277 @@
+import "../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
+import { SubscriptionManager } from "../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/subscription-manager.mjs";
+import { velocityPerSecond } from "../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/velocity-per-second.mjs";
+import { warnOnce } from "../../../../../../motion-utils@12.5.0/external/motion-utils/dist/es/warn-once.mjs";
+import { frame } from "../frameloop/frame.mjs";
+import { time } from "../frameloop/sync-time.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.
+   */
+  constructor(init, options = {}) {
+    this.version = "12.5.0";
+    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`.
+   */
+  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
+   */
+  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
+};

package/dist/es/external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/global-config.mjs

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

package/dist/es/features/gestures/drag/VisualElementDragControls.mjs

@@ -17,7 +17,8 @@ import { mixNumber } from "../../../utils/mix/number.mjs";
 import { invariant } from "hey-listen";
 import { isPresent } from "../../../state/utils/is-present.mjs";
 import { getContextWindow } from "../../../utils/get-context-window.mjs";
-import { frame } from "motion-dom";
+import { frame } from "../../../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import "../../../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 const elementDragControls = /* @__PURE__ */ new WeakMap();
 class VisualElementDragControls {
   constructor(visualElement) {

package/dist/es/features/gestures/hover/index.mjs

@@ -1,6 +1,8 @@
 import { Feature } from "../../feature.mjs";
+import { hover } from "../../../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/gestures/hover.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 { extractEventInfo } from "../press/index.mjs";
-import { hover, frame } from "motion-dom";
 function handleHoverEvent(state, event, lifecycle) {
   const props = state.options;
   if (props.whileHover) {

package/dist/es/features/gestures/in-view/index.mjs

@@ -1,6 +1,7 @@
 import { Feature } from "../../feature.mjs";
 import { inView } from "../../../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
-import { frame } from "motion-dom";
+import { frame } from "../../../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import "../../../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 function handleHoverEvent(state, entry, lifecycle) {
   const props = state.options;
   if (props.whileInView) {

package/dist/es/features/gestures/pan/PanSession.mjs

@@ -1,9 +1,10 @@
 import { addPointerEvent } from "../../../events/add-pointer-event.mjs";
 import { extractEventInfo } from "../../../events/event-info.mjs";
 import { distance2D } from "../../../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/distance.mjs";
+import { frame, cancelFrame, frameData } from "../../../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import "../../../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 import { pipe } from "../../../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/utils/pipe.mjs";
 import { secondsToMilliseconds, millisecondsToSeconds } from "../../../utils/time-conversion.mjs";
-import { frame, cancelFrame, frameData } from "motion-dom";
 import { isPrimaryPointer } from "../../../events/utils/is-primary-pointer.mjs";
 class PanSession {
   constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {

package/dist/es/features/gestures/pan/index.mjs

@@ -3,8 +3,8 @@ import { addPointerEvent } from "../../../events/add-pointer-event.mjs";
 import { Feature } from "../../feature.mjs";
 import { noop } from "../../../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/noop.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 { getContextWindow } from "../../../utils/get-context-window.mjs";
-import { frame } from "motion-dom";
 function asyncHandler(handler) {
   return (event, info) => {
     if (handler) {

package/dist/es/features/gestures/press/index.mjs

@@ -1,5 +1,7 @@
 import { Feature } from "../../feature.mjs";
-import { press, frame } from "motion-dom";
+import { press } from "../../../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/gestures/press/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";
 function extractEventInfo(event) {
   return {
     point: {

package/dist/es/index.mjs

@@ -8,7 +8,12 @@ import { domAnimation } from "./features/dom-animation.mjs";
 import { default as default3 } from "./components/RowValue.vue.mjs";
 import { default as default4 } from "./components/animate-presence/AnimatePresence.vue.mjs";
 import { default as default5 } from "./components/motion-config/MotionConfig.vue.mjs";
-import { MotionValue, cancelFrame, frame, frameData, hover, isDragActive, motionValue, press, time, motionValue as motionValue2 } from "motion-dom";
+import { MotionValue, motionValue, motionValue as motionValue2 } from "./external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
+import { cancelFrame, frame, frameData } from "./external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import { hover } from "./external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/gestures/hover.mjs";
+import { isDragActive } from "./external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/gestures/drag/state/is-active.mjs";
+import { press } from "./external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/gestures/press/index.mjs";
+import { time } from "./external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/sync-time.mjs";
 import { invariant } from "./external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 import { noop } from "./external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/noop.mjs";
 import { progress } from "./external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/progress.mjs";

package/dist/es/state/create-visual-element.d.ts

@@ -1 +1,2 @@
-export declare function createVisualElement(Component: string, options: any): any;
+import { AsTag } from '../types';
+export declare function createVisualElement(Component: AsTag, options: any): any;

package/dist/es/state/motion-state.mjs

@@ -5,7 +5,7 @@ import { doneCallbacks } from "../components/presence.mjs";
 import { isVariantLabels } from "./utils/is-variant-labels.mjs";
 import { noop } from "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/noop.mjs";
 import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
-import { frame, cancelFrame } from "motion-dom";
+import { frame, cancelFrame } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 const mountedLayoutIds = /* @__PURE__ */ new Set();

package/dist/es/state/style.mjs

@@ -44,12 +44,16 @@ function createStyles(keyframes) {
   if (transforms.length) {
     initialKeyframes.transform = buildTransformTemplate(transforms);
   }
+  if (Object.keys(initialKeyframes).length === 0) {
+    return null;
+  }
   return initialKeyframes;
 }
 const SVG_STYLE_TO_ATTRIBUTES = {
   "fill": true,
   "stroke": true,
   "opacity": true,
+  "stroke-width": true,
   "fill-opacity": true,
   "stroke-opacity": true,
   "stroke-linecap": true,

package/dist/es/state/utils.d.ts

@@ -1,6 +1,5 @@
-import { $Transition, Options } from '../types';
+import { $Transition, AsTag, Options } from '../types';
 import { Variant } from 'framer-motion';
-import { IntrinsicElementAttributes } from 'vue';
 export declare function resolveVariant(definition?: Options['animate'], variants?: Options['variants'], custom?: Options['custom']): Variant | undefined;
 export declare function hasChanged(a: any, b: any): boolean;
 export declare function shallowCompare(next: any[], prev: any[]): boolean;
@@ -10,10 +9,9 @@ export declare function getOptions(options: $Transition, key: string): $Transiti
 export declare function isCssVar(name: string): boolean;
 export declare const noopReturn: <V>(v: V) => V;
 export declare function isNumber(value: any): boolean;
-type ElementType = keyof IntrinsicElementAttributes;
 export declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
 type UnionStringArray<T extends Readonly<string[]>> = T[number];
 export type SVGElements = UnionStringArray<typeof svgElements>;
-export declare function isSVGElement(as: ElementType): as is SVGElements;
+export declare function isSVGElement(as: AsTag): as is SVGElements;
 export declare function isAnimateChanged(oldOptions: Options, newOptions: Options): boolean;
 export {};

package/dist/es/types/common.d.ts

@@ -1,4 +1,4 @@
 import { Component, DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue';
 export type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;
 export type ElementType = keyof IntrinsicElementAttributes;
-export type AsTag = keyof IntrinsicElementAttributes | (Component & string);
+export type AsTag = keyof IntrinsicElementAttributes | ({} & string) | Component;

package/dist/es/utils/use-animation-frame.mjs

@@ -1,5 +1,6 @@
 import { onBeforeUpdate, onUnmounted } from "vue";
-import { frame, cancelFrame } from "motion-dom";
+import { frame, cancelFrame } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
+import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
 function useAnimationFrame(callback) {
   let initialTimestamp = 0;
   const provideTimeSinceStart = ({ timestamp, delta }) => {

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

@@ -1,5 +1,7 @@
 import { onUnmounted } from "vue";
-import { motionValue, cancelFrame, frame } from "motion-dom";
+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 { cancelFrame, frame } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/frameloop/frame.mjs";
 function useCombineMotionValues(combineValues) {
   const value = motionValue(combineValues());
   const updateValue = () => value.set(combineValues());

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

@@ -1,5 +1,6 @@
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { collectMotionValues } from "motion-dom";
+import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
+import { collectMotionValues } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
 import { onBeforeUpdate } from "vue";
 function useComputed(computed) {
   collectMotionValues.current = [];

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

@@ -1,7 +1,8 @@
 import { onMounted, watch } from "vue";
 import { warning } from "hey-listen";
 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";
+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";
 function refWarning(name, ref) {
   warning(
     Boolean(!ref || ref.value),

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

@@ -1,6 +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, frame, frameData } from "motion-dom";
+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 { isMotionValue } from "../utils/motion-value.mjs";
 function toNumber(v) {
   if (typeof v === "number")

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

@@ -1,5 +1,6 @@
 import { useAnimationFrame } from "../utils/use-animation-frame.mjs";
-import { motionValue } from "motion-dom";
+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";
 function useTime() {
   const time = motionValue(0);
   useAnimationFrame((t) => time.set(t));

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

@@ -1,5 +1,7 @@
 import { useMotionValueEvent } from "./use-motion-value-event.mjs";
-import { motionValue, frame } from "motion-dom";
+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";
 function useVelocity(value) {
   const velocity = motionValue(value.getVelocity());
   const updateVelocity = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-beta.1",
   "description": "",
   "author": "",
   "license": "MIT",