motion-v 0.10.0-beta.1 → 0.11.0-beta.1

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

@@ -1,14 +1,14 @@
 import { invariant } from "hey-listen";
-import { visualElementStore } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/store.mjs";
-import { isDef } from "@vueuse/core";
-import { resolveVariant } from "./utils.mjs";
+import { visualElementStore } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/store.mjs";
+import { resolveVariant, isAnimateChanged } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
 import { doneCallbacks } from "../components/presence.mjs";
 import { animateUpdates } from "./animate-updates.mjs";
-import { frame } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
+const mountedLayoutIds = /* @__PURE__ */ new Set();
 class MotionState {
   constructor(options, parent) {
     var _a;
@@ -52,7 +52,7 @@ class MotionState {
     this.initTarget(initialVariantSource);
     this.featureManager = new FeatureManager(this);
   }
-  // Get animation context, falling back to parent context
+  // Get animation context, falling back to parent context for inheritance
   get context() {
     if (!this._context) {
       const handler = {
@@ -73,10 +73,6 @@ class MotionState {
     }
     this.target = {};
   }
-  // Get initial animation state
-  get initial() {
-    return isDef(this.options.initial) ? this.options.initial : this.context.initial;
-  }
   // Update visual element with new options
   updateOptions() {
     this.visualElement.update({
@@ -89,10 +85,11 @@ class MotionState {
       isPresent: !doneCallbacks.has(this.element)
     });
   }
+  // Called before mounting, executes in parent-to-child order
   beforeMount() {
     this.featureManager.beforeMount();
   }
-  // Mount motion state to DOM element
+  // Mount motion state to DOM element, handles parent-child relationships
   mount(element, options, notAnimate = false) {
     invariant(
       Boolean(element),
@@ -111,51 +108,66 @@ class MotionState {
     if (!notAnimate && this.options.animate) {
       this.animateUpdates();
     }
+    if (this.options.layoutId) {
+      mountedLayoutIds.add(this.options.layoutId);
+      frame.render(() => {
+        mountedLayoutIds.clear();
+      });
+    }
   }
+  // Called before unmounting, executes in child-to-parent order
   beforeUnmount() {
     this.featureManager.beforeUnmount();
   }
   // Unmount motion state and optionally unmount children
+  // Handles unmounting in the correct order based on component tree
   unmount(unMountChildren = false) {
-    var _a, _b, _c;
-    mountedStates.delete(this.element);
-    this.featureManager.unmount();
-    if (unMountChildren) {
-      frame.render(() => {
-        var _a2;
-        (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
+    const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
+    const unmount = () => {
+      var _a, _b, _c;
+      mountedStates.delete(this.element);
+      this.featureManager.unmount();
+      if (unMountChildren && !shouldDelay) {
+        frame.render(() => {
+          var _a2;
+          (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
+        });
+      } else {
+        (_a = this.visualElement) == null ? void 0 : _a.unmount();
+      }
+      if (unMountChildren) {
+        const unmountChild = (child) => {
+          var _a2;
+          child.unmount(true);
+          (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
+        };
+        Array.from(this.children).forEach(unmountChild);
+      }
+      (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
+    };
+    if (shouldDelay) {
+      Promise.resolve().then(() => {
+        unmount();
       });
     } else {
-      (_a = this.visualElement) == null ? void 0 : _a.unmount();
-    }
-    if (unMountChildren) {
-      const unmountChild = (child) => {
-        var _a2;
-        child.unmount(true);
-        (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
-      };
-      Array.from(this.children).forEach(unmountChild);
+      unmount();
     }
-    (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
   }
+  // Called before updating, executes in parent-to-child order
   beforeUpdate() {
     this.featureManager.beforeUpdate();
   }
   // Update motion state with new options
-  update(options, notAnimate = false) {
-    const prevAnimate = JSON.stringify(this.options.animate);
+  update(options) {
+    const hasAnimateChange = isAnimateChanged(this.options, options);
     this.options = options;
-    let hasAnimateChange = false;
-    if (prevAnimate !== JSON.stringify(options.animate)) {
-      hasAnimateChange = true;
-    }
     this.updateOptions();
     this.featureManager.update();
-    if (hasAnimateChange && !notAnimate) {
+    if (hasAnimateChange) {
       this.animateUpdates();
     }
   }
-  // Set animation state active status
+  // Set animation state active status and propagate to children
   setActive(name, isActive, isAnimate = true) {
     var _a;
     if (!this.element || this.activeStates[name] === isActive)
@@ -176,10 +188,12 @@ class MotionState {
   getOptions() {
     return this.options;
   }
+  // Called before layout updates to prepare for changes
   willUpdate(label) {
     var _a;
-    if (this.options.layout || this.options.layoutId)
+    if (this.options.layout || this.options.layoutId) {
       (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
+    }
   }
 }
 export {

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

@@ -15,4 +15,5 @@ export declare const svgElements: readonly ["animate", "circle", "defs", "desc",
 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 isAnimateChanged(oldOptions: Options, newOptions: Options): boolean;
 export {};

package/dist/es/state/utils.mjs

@@ -94,9 +94,30 @@ const svgElementSet = new Set(svgElements);
 function isSVGElement(as) {
   return svgElementSet.has(as);
 }
+function isAnimateChanged(oldOptions, newOptions) {
+  const oldAnimate = oldOptions.animate;
+  const newAnimate = newOptions.animate;
+  if (oldAnimate === newAnimate)
+    return false;
+  if (!oldAnimate || !newAnimate)
+    return true;
+  if (typeof oldAnimate === "object" || typeof newAnimate === "object") {
+    const oldKeys = Object.keys(oldAnimate);
+    const newKeys = Object.keys(newAnimate);
+    if (oldKeys.length !== newKeys.length)
+      return true;
+    return oldKeys.some((key) => {
+      const oldVal = oldAnimate[key];
+      const newVal = newAnimate[key];
+      return oldVal !== newVal;
+    });
+  }
+  return oldAnimate !== newAnimate;
+}
 export {
   getOptions,
   hasChanged,
+  isAnimateChanged,
   isCssVar,
   isNumber,
   isSVGElement,

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

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

package/dist/es/utils/use-in-view.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, isRef, unref } from "vue";
-import { inView } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
+import { inView } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
 function useInView(domRef, options) {
   const isInView = ref(false);
   watch([domRef, () => isRef(options) ? options.value : options], (_v1, _v2) => {

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

@@ -1,6 +1,6 @@
 import { onUnmounted } from "vue";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
-import { cancelFrame, frame } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { cancelFrame, frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/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,5 @@
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { collectMotionValues } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
+import { collectMotionValues } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
 import { onBeforeUpdate } from "vue";
 function useComputed(computed) {
   collectMotionValues.current = [];

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

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, watch } from "vue";
 import { warning } from "hey-listen";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
-import { scroll } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { scroll } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
 function refWarning(name, ref) {
   warning(
     Boolean(!ref || ref.value),

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

@@ -1,7 +1,7 @@
 import { watch } from "vue";
-import { animateValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
-import { frame, frameData } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { animateValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { frame, frameData } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/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,5 @@
 import { useAnimationFrame } from "../utils/use-animation-frame.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
 function useTime() {
   const time = motionValue(0);
   useAnimationFrame((t) => time.set(t));

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

@@ -1,6 +1,6 @@
 import { useComputed } from "./use-computed.mjs";
 import { useCombineMotionValues } from "./use-combine-values.mjs";
-import { transform } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/utils/transform.mjs";
+import { transform } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/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,6 +1,6 @@
 import { useMotionValueEvent } from "./use-motion-value-event.mjs";
-import { motionValue } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/value/index.mjs";
-import { frame } from "../external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/value/index.mjs";
+import { frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/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": "0.10.0-beta.1",
+  "version": "0.11.0-beta.1",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -56,8 +56,9 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.0.0",
-    "framer-motion": "12.4.0",
-    "hey-listen": "^1.0.8"
+    "framer-motion": "11.16.6",
+    "hey-listen": "^1.0.8",
+    "motion-dom": "^11.16.4"
   },
   "devDependencies": {
     "@testing-library/vue": "^8.1.0",
@@ -70,7 +71,7 @@
     "rimraf": "^6.0.1",
     "vite": "^5.4.8",
     "vite-plugin-dts": "^4.2.4",
-    "vitest": "^1.4.0",
+    "vitest": "^1.6.1",
     "vue": "3.4.38"
   },
   "scripts": {

package/dist/es/external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs

@@ -1,6 +0,0 @@
-import "../../../../../../../../../motion-utils@12.0.0/external/motion-utils/dist/es/errors.mjs";
-import { memo } from "../../../../../../../../../motion-utils@12.0.0/external/motion-utils/dist/es/memo.mjs";
-const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
-export {
-  supportsWaapi
-};

package/dist/es/external/.pnpm/framer-motion@12.4.0/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.0/external/framer-motion/dist/es/projection/styles/scale-correction.mjs

@@ -1,14 +0,0 @@
-import { isCSSVariableName } from "../../render/dom/utils/is-css-variable.mjs";
-const scaleCorrectors = {};
-function addScaleCorrector(correctors) {
-  for (const key in correctors) {
-    scaleCorrectors[key] = correctors[key];
-    if (isCSSVariableName(key)) {
-      scaleCorrectors[key].isCSSVariable = true;
-    }
-  }
-}
-export {
-  addScaleCorrector,
-  scaleCorrectors
-};

package/dist/es/external/.pnpm/framer-motion@12.4.0/external/framer-motion/dist/es/render/svg/utils/measure.mjs

@@ -1,15 +0,0 @@
-function updateSVGDimensions(instance, renderState) {
-  try {
-    renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
-  } catch (e) {
-    renderState.dimensions = {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    };
-  }
-}
-export {
-  updateSVGDimensions
-};

package/dist/es/external/.pnpm/framer-motion@12.4.0/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/motion-dom@12.0.0/external/motion-dom/dist/es/utils/supports/scroll-timeline.mjs

@@ -1,6 +0,0 @@
-import "../../../../../../../motion-utils@12.0.0/external/motion-utils/dist/es/errors.mjs";
-import { memo } from "../../../../../../../motion-utils@12.0.0/external/motion-utils/dist/es/memo.mjs";
-const supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
-export {
-  supportsScrollTimeline
-};

package/dist/es/external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/noop.mjs

@@ -1,4 +0,0 @@
-const noop = /* @__NO_SIDE_EFFECTS__ */ (any) => any;
-export {
-  noop
-};

package/dist/es/external/.pnpm/motion-utils@12.0.0/external/motion-utils/dist/es/time-conversion.mjs

@@ -1,6 +0,0 @@
-const secondsToMilliseconds = /* @__NO_SIDE_EFFECTS__ */ (seconds) => seconds * 1e3;
-const millisecondsToSeconds = /* @__NO_SIDE_EFFECTS__ */ (milliseconds) => milliseconds / 1e3;
-export {
-  millisecondsToSeconds,
-  secondsToMilliseconds
-};