motion-v 1.0.0-alpha.0 → 1.0.0-alpha.1

package/dist/cjs/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
-const core = require("@vueuse/core");
-const motionDom = require("motion-dom");
 const heyListen = require("hey-listen");
+const motionDom = require("motion-dom");
+const core = require("@vueuse/core");
 function addUniqueItem(arr, item) {
   if (arr.indexOf(item) === -1)
     arr.push(item);
@@ -5861,9 +5861,13 @@ function convertSvgStyleToAttributes(keyframes2) {
     style: styleProps
   };
 }
+function createVisualElement(Component, options) {
+  return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
+}
 const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 class AnimationFeature extends Feature {
   constructor(state2) {
+    var _a;
     super(state2);
     this.animateUpdates = ({
       controlActiveState,
@@ -5893,7 +5897,30 @@ class AnimationFeature extends Feature {
         isExit
       });
     };
+    this.state.visualElement = createVisualElement(this.state.options.as, {
+      presenceContext: null,
+      parent: (_a = this.state.parent) == null ? void 0 : _a.visualElement,
+      props: {
+        ...this.state.options,
+        whileTap: this.state.options.whilePress
+      },
+      visualState: {
+        renderState: {
+          transform: {},
+          transformOrigin: {},
+          style: {},
+          vars: {},
+          attrs: {}
+        },
+        latestValues: {
+          ...this.state.baseTarget
+        }
+      },
+      reducedMotionConfig: this.state.options.motionConfig.reduceMotion
+    });
     this.state.animateUpdates = this.animateUpdates;
+    if (this.state.isMounted())
+      this.state.startAnimation();
   }
   updateAnimationControlsSubscription() {
     const { animate: animate2 } = this.state.options;
@@ -6014,6 +6041,13 @@ class AnimationFeature extends Feature {
    * Subscribe any provided AnimationControls to the component's VisualElement
    */
   mount() {
+    const { element } = this.state;
+    mountedStates.set(element, this.state);
+    if (!visualElementStore.get(element)) {
+      this.state.visualElement.mount(element);
+      visualElementStore.set(element, this.state.visualElement);
+    }
+    this.state.visualElement.state = this.state;
     this.updateAnimationControlsSubscription();
   }
   update() {
@@ -7548,9 +7582,6 @@ const domAnimation = [
   // LayoutFeature,
   // PanGesture,
 ];
-function createVisualElement(Component, options) {
-  return isSVGElement(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
-}
 function isVariantLabels(value) {
   return typeof value === "string" || value === false || Array.isArray(value);
 }
@@ -7578,28 +7609,8 @@ class MotionState {
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
     const initialVariantSource = this.context.initial === false ? ["initial", "animate"] : ["initial"];
     this.initTarget(initialVariantSource);
-    this.visualElement = createVisualElement(this.options.as, {
-      presenceContext: null,
-      parent: parent == null ? void 0 : parent.visualElement,
-      props: {
-        ...this.options,
-        whileTap: this.options.whilePress
-      },
-      visualState: {
-        renderState: {
-          transform: {},
-          transformOrigin: {},
-          style: {},
-          vars: {},
-          attrs: {}
-        },
-        latestValues: {
-          ...this.baseTarget
-        }
-      },
-      reducedMotionConfig: options.motionConfig.reduceMotion
-    });
     this.featureManager = new FeatureManager(this);
+    this.type = isSVGElement(this.options.as) ? "svg" : "html";
   }
   // Get animation context, falling back to parent context for inheritance
   get context() {
@@ -7626,7 +7637,8 @@ class MotionState {
   }
   // Update visual element with new options
   updateOptions() {
-    this.visualElement.update({
+    var _a;
+    (_a = this.visualElement) == null ? void 0 : _a.update({
       ...this.options,
       whileTap: this.options.whilePress,
       reducedMotionConfig: this.options.motionConfig.reduceMotion
@@ -7647,16 +7659,10 @@ class MotionState {
     );
     this.element = element;
     this.options = options;
-    mountedStates.set(element, this);
-    if (!visualElementStore.get(element)) {
-      this.visualElement.mount(element);
-      visualElementStore.set(element, this.visualElement);
-    }
-    this.visualElement.state = this;
     this.updateOptions();
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      if (this.visualElement.type === "svg") {
+      if (this.type === "svg") {
         this.visualElement.updateDimensions();
       }
       (_a = this.startAnimation) == null ? void 0 : _a.call(this);
@@ -7669,10 +7675,10 @@ class MotionState {
     }
   }
   clearAnimation() {
-    var _a;
+    var _a, _b;
     this.currentProcess && motionDom.cancelFrame(this.currentProcess);
     this.currentProcess = null;
-    (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+    (_b = (_a = this.visualElement) == null ? void 0 : _a.variantChildren) == null ? void 0 : _b.forEach((child) => {
       child.state.clearAnimation();
     });
   }
@@ -7800,7 +7806,8 @@ function useMotionState(props) {
   );
   provideMotion(state2);
   function getAttrs() {
-    const isSVG = state2.visualElement.type === "svg";
+    var _a2;
+    const isSVG = state2.type === "svg";
     const attrsProps = { ...attrs };
     Object.keys(attrs).forEach((key) => {
       if (isMotionValue(attrs[key]))
@@ -7808,7 +7815,7 @@ function useMotionState(props) {
     });
     let styleProps = {
       ...props.style,
-      ...isSVG ? {} : state2.visualElement.latestValues
+      ...isSVG ? {} : ((_a2 = state2.visualElement) == null ? void 0 : _a2.latestValues) || state2.baseTarget
     };
     if (isSVG) {
       const { attributes, style: style2 } = convertSvgStyleToAttributes({

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

@@ -54,7 +54,8 @@ function useMotionState(props) {
   );
   provideMotion(state);
   function getAttrs() {
-    const isSVG = state.visualElement.type === "svg";
+    var _a2;
+    const isSVG = state.type === "svg";
     const attrsProps = { ...attrs };
     Object.keys(attrs).forEach((key) => {
       if (isMotionValue(attrs[key]))
@@ -62,7 +63,7 @@ function useMotionState(props) {
     });
     let styleProps = {
       ...props.style,
-      ...isSVG ? {} : state.visualElement.latestValues
+      ...isSVG ? {} : ((_a2 = state.visualElement) == null ? void 0 : _a2.latestValues) || state.baseTarget
     };
     if (isSVG) {
       const { attributes, style } = convertSvgStyleToAttributes({

package/dist/es/features/animation/animation.mjs

@@ -1,16 +1,20 @@
 import { isAnimationControls } from "../../animation/utils.mjs";
 import { Feature } from "../feature.mjs";
+import { mountedStates } from "../../state/motion-state.mjs";
+import { visualElementStore } from "../../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/render/store.mjs";
 import { motionEvent } from "../../state/event.mjs";
 import { style } from "../../state/style.mjs";
 import { transformResetValue } from "../../state/transform.mjs";
 import { hasChanged, resolveVariant } from "../../state/utils.mjs";
 import { isDef } from "@vueuse/core";
+import { createVisualElement } from "../../state/create-visual-element.mjs";
 import { animate } from "../../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/animation/animate/index.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";
 const STATE_TYPES = ["initial", "animate", "whileInView", "whileHover", "whilePress", "whileDrag", "whileFocus", "exit"];
 class AnimationFeature extends Feature {
   constructor(state) {
+    var _a;
     super(state);
     this.animateUpdates = ({
       controlActiveState,
@@ -40,7 +44,30 @@ class AnimationFeature extends Feature {
         isExit
       });
     };
+    this.state.visualElement = createVisualElement(this.state.options.as, {
+      presenceContext: null,
+      parent: (_a = this.state.parent) == null ? void 0 : _a.visualElement,
+      props: {
+        ...this.state.options,
+        whileTap: this.state.options.whilePress
+      },
+      visualState: {
+        renderState: {
+          transform: {},
+          transformOrigin: {},
+          style: {},
+          vars: {},
+          attrs: {}
+        },
+        latestValues: {
+          ...this.state.baseTarget
+        }
+      },
+      reducedMotionConfig: this.state.options.motionConfig.reduceMotion
+    });
     this.state.animateUpdates = this.animateUpdates;
+    if (this.state.isMounted())
+      this.state.startAnimation();
   }
   updateAnimationControlsSubscription() {
     const { animate: animate2 } = this.state.options;
@@ -161,6 +188,13 @@ class AnimationFeature extends Feature {
    * Subscribe any provided AnimationControls to the component's VisualElement
    */
   mount() {
+    const { element } = this.state;
+    mountedStates.set(element, this.state);
+    if (!visualElementStore.get(element)) {
+      this.state.visualElement.mount(element);
+      visualElementStore.set(element, this.state.visualElement);
+    }
+    this.state.visualElement.state = this.state;
     this.updateAnimationControlsSubscription();
   }
   update() {

package/dist/es/state/motion-state.d.ts

@@ -12,8 +12,9 @@ export declare const mountedStates: WeakMap<Element, MotionState>;
  */
 export declare class MotionState {
     readonly id: string;
+    type: 'html' | 'svg';
     element: HTMLElement | null;
-    private parent?;
+    parent?: MotionState;
     options: Options & {
         animatePresenceContext?: PresenceContext;
         features?: Feature[];

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

@@ -1,8 +1,6 @@
 import { invariant } from "hey-listen";
-import { visualElementStore } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/render/store.mjs";
-import { resolveVariant, isAnimateChanged } from "./utils.mjs";
+import { isSVGElement, 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 { isVariantLabels } from "./utils/is-variant-labels.mjs";
 import { noop } from "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/noop.mjs";
@@ -32,28 +30,8 @@ class MotionState {
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
     const initialVariantSource = this.context.initial === false ? ["initial", "animate"] : ["initial"];
     this.initTarget(initialVariantSource);
-    this.visualElement = createVisualElement(this.options.as, {
-      presenceContext: null,
-      parent: parent == null ? void 0 : parent.visualElement,
-      props: {
-        ...this.options,
-        whileTap: this.options.whilePress
-      },
-      visualState: {
-        renderState: {
-          transform: {},
-          transformOrigin: {},
-          style: {},
-          vars: {},
-          attrs: {}
-        },
-        latestValues: {
-          ...this.baseTarget
-        }
-      },
-      reducedMotionConfig: options.motionConfig.reduceMotion
-    });
     this.featureManager = new FeatureManager(this);
+    this.type = isSVGElement(this.options.as) ? "svg" : "html";
   }
   // Get animation context, falling back to parent context for inheritance
   get context() {
@@ -80,7 +58,8 @@ class MotionState {
   }
   // Update visual element with new options
   updateOptions() {
-    this.visualElement.update({
+    var _a;
+    (_a = this.visualElement) == null ? void 0 : _a.update({
       ...this.options,
       whileTap: this.options.whilePress,
       reducedMotionConfig: this.options.motionConfig.reduceMotion
@@ -101,16 +80,10 @@ class MotionState {
     );
     this.element = element;
     this.options = options;
-    mountedStates.set(element, this);
-    if (!visualElementStore.get(element)) {
-      this.visualElement.mount(element);
-      visualElementStore.set(element, this.visualElement);
-    }
-    this.visualElement.state = this;
     this.updateOptions();
     this.featureManager.mount();
     if (!notAnimate && this.options.animate) {
-      if (this.visualElement.type === "svg") {
+      if (this.type === "svg") {
         this.visualElement.updateDimensions();
       }
       (_a = this.startAnimation) == null ? void 0 : _a.call(this);
@@ -123,10 +96,10 @@ class MotionState {
     }
   }
   clearAnimation() {
-    var _a;
+    var _a, _b;
     this.currentProcess && cancelFrame(this.currentProcess);
     this.currentProcess = null;
-    (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
+    (_b = (_a = this.visualElement) == null ? void 0 : _a.variantChildren) == null ? void 0 : _b.forEach((child) => {
       child.state.clearAnimation();
     });
   }

package/package.json

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