motion-v 0.3.0 → 0.4.0

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

@@ -1,119 +1,176 @@
-import { invariant as d } from "../node_modules/.pnpm/hey-listen@1.0.8/node_modules/hey-listen/dist/hey-listen.es.mjs";
-import { visualElementStore as r } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/store.mjs";
-import { createDOMVisualElement as x } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/utils/create-visual-element.mjs";
-import { resolveVariant as l, getOptions as E, hasChanged as T, noop as S } from "./utils.mjs";
-import { FeatureManager as M } from "../features/feature-manager.mjs";
-import { style as b } from "./style.mjs";
-import { transformResetValue as w } from "./transform.mjs";
-import { scheduleAnimation as c, unscheduleAnimation as O } from "./schedule.mjs";
-import { motionEvent as u } from "./event.mjs";
-import { animate as V } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animate/index.mjs";
-import { isDef as p } from "../node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.4.38_typescript@5.5.4_/node_modules/@vueuse/shared/index.mjs";
-const A = ["initial", "animate", "inView", "hover", "press", "exit", "drag"], g = /* @__PURE__ */ new WeakMap();
-class q {
-  constructor(t, e) {
-    this.element = null, this.activeStates = {
-      initial: !0,
-      animate: !0
-    }, this._context = null, this.options = t, this.parent = e, this.depth = (e == null ? void 0 : e.depth) + 1 || 0;
-    const n = t.initial === !1 ? "animate" : "initial";
-    this.featureManager = new M(this), this.initTarget(n);
+import { invariant } from "../node_modules/.pnpm/hey-listen@1.0.8/node_modules/hey-listen/dist/hey-listen.es.mjs";
+import { visualElementStore } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/store.mjs";
+import { resolveVariant, getOptions, hasChanged, noop } from "./utils.mjs";
+import { FeatureManager } from "../features/feature-manager.mjs";
+import { style } from "./style.mjs";
+import { transformResetValue } from "./transform.mjs";
+import { scheduleAnimation, unscheduleAnimation } from "./schedule.mjs";
+import { motionEvent } from "./event.mjs";
+import { createVisualElement } from "./create-visual-element.mjs";
+import { animate } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animate/index.mjs";
+import { isDef } from "../node_modules/.pnpm/@vueuse_shared@12.0.0_typescript@5.5.4/node_modules/@vueuse/shared/index.mjs";
+const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "exit", "drag"];
+const mountedStates = /* @__PURE__ */ new WeakMap();
+class MotionState {
+  constructor(options, parent) {
+    this.element = null;
+    this.activeStates = {
+      initial: true,
+      animate: true
+    };
+    this._context = null;
+    this.options = options;
+    this.parent = parent;
+    this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
+    this.visualElement = createVisualElement(this.options.as, {
+      presenceContext: null,
+      parent: parent == null ? void 0 : parent.visualElement,
+      props: {
+        ...this.options
+      },
+      visualState: {
+        renderState: {
+          transform: {},
+          transformOrigin: {},
+          style: {},
+          vars: {},
+          attrs: {}
+        },
+        latestValues: {}
+      }
+    });
+    const initialVariantSource = options.initial === false ? "animate" : "initial";
+    this.featureManager = new FeatureManager(this);
+    this.initTarget(initialVariantSource);
   }
   get context() {
     if (!this._context) {
-      const t = {
-        get: (e, n) => {
-          var s;
-          return typeof this.options[n] == "string" ? this.options[n] : (s = this.parent) == null ? void 0 : s.context[n];
+      const handler = {
+        get: (target, prop) => {
+          var _a;
+          return typeof this.options[prop] === "string" ? this.options[prop] : (_a = this.parent) == null ? void 0 : _a.context[prop];
         }
       };
-      this._context = new Proxy({}, t);
+      this._context = new Proxy({}, handler);
     }
     return this._context;
   }
-  initTarget(t) {
-    this.baseTarget = l(this.options[t] || this.context[t], this.options.variants) || {}, this.target = { ...this.baseTarget };
+  initTarget(initialVariantSource) {
+    this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
+    this.target = { ...this.baseTarget };
   }
   get initial() {
-    return p(this.options.initial) ? this.options.initial : this.context.initial;
+    return isDef(this.options.initial) ? this.options.initial : this.context.initial;
   }
-  mount(t) {
-    var n;
-    d(
-      !!t,
+  mount(element) {
+    var _a;
+    invariant(
+      Boolean(element),
       "Animation state must be mounted with valid Element"
-    ), this.element = t, g.set(t, this), r.get(t) || x(t);
-    const e = r.get(t);
-    if (this.visualElement = e, e.update(this.options, (n = this.parent) == null ? void 0 : n.context), typeof this.initial == "object")
-      for (const s in this.initial)
-        e.setStaticValue(s, this.initial[s]);
-    else if (typeof this.initial == "string" && this.options.variants)
-      for (const s in this.options.variants[this.initial])
-        e.setStaticValue(s, this.options.variants[this.initial][s]);
+    );
+    this.element = element;
+    mountedStates.set(element, this);
+    if (!visualElementStore.get(element)) {
+      this.visualElement.mount(element);
+      visualElementStore.set(element, this.visualElement);
+    }
+    this.visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    if (typeof this.initial === "object") {
+      for (const key in this.initial) {
+        this.visualElement.setStaticValue(key, this.initial[key]);
+      }
+    } else if (typeof this.initial === "string" && this.options.variants) {
+      for (const key in this.options.variants[this.initial]) {
+        this.visualElement.setStaticValue(key, this.options.variants[this.initial][key]);
+      }
+    }
     this.featureManager.mount();
   }
   unmount() {
-    var t;
-    g.delete(this.element), O(this), (t = r.get(this.element)) == null || t.unmount(), this.featureManager.unmount();
+    var _a;
+    mountedStates.delete(this.element);
+    unscheduleAnimation(this);
+    (_a = visualElementStore.get(this.element)) == null ? void 0 : _a.unmount();
+    this.featureManager.unmount();
   }
-  update(t) {
-    var e;
-    this.options = t, this.visualElement.update(this.options, (e = this.parent) == null ? void 0 : e.context), this.featureManager.update(), c(this);
+  update(options) {
+    var _a;
+    this.options = options;
+    this.visualElement.update(this.options, (_a = this.parent) == null ? void 0 : _a.context);
+    this.featureManager.update();
+    scheduleAnimation(this);
   }
-  setActive(t, e) {
-    this.element && (this.activeStates[t] = e, c(this));
+  setActive(name, isActive) {
+    if (!this.element)
+      return;
+    this.activeStates[name] = isActive;
+    scheduleAnimation(this);
   }
   *animateUpdates() {
-    const t = this.target;
+    const prevTarget = this.target;
     this.target = {};
-    const e = {};
-    for (const i of A) {
-      if (!this.activeStates[i])
+    const animationOptions = {};
+    for (const name of STATE_TYPES) {
+      if (!this.activeStates[name])
         continue;
-      const o = l(
-        p(this.options[i]) ? this.options[i] : this.context[i],
+      const variant = resolveVariant(
+        isDef(this.options[name]) ? this.options[name] : this.context[name],
         this.options.variants,
         this.options.custom
       );
-      if (!o)
+      if (!variant)
         continue;
-      const v = { ...t, ...o };
-      for (const a in v)
-        a !== "transition" && (this.target[a] = o[a], e[a] = E(
-          o.transition ?? this.options.transition ?? {},
-          a
-        ));
+      const allTarget = { ...prevTarget, ...variant };
+      for (const key in allTarget) {
+        if (key === "transition")
+          continue;
+        this.target[key] = variant[key];
+        animationOptions[key] = getOptions(
+          variant.transition ?? this.options.transition ?? {},
+          key
+        );
+      }
     }
-    const n = /* @__PURE__ */ new Set([
+    const allTargetKeys = /* @__PURE__ */ new Set([
       ...Object.keys(this.target),
-      ...Object.keys(t)
-    ]), s = [];
-    n.forEach((i) => {
-      var o;
-      this.target[i] === void 0 && (this.target[i] = this.baseTarget[i]), T(t[i], this.target[i]) && ((o = this.baseTarget)[i] ?? (o[i] = b.get(this.element, i)), s.push(
-        () => V(
-          this.element,
-          {
-            [i]: this.target[i] === "none" ? w[i] : this.target[i]
-          },
-          e[i] || {}
-        )
-      ));
-    }), yield;
-    const h = s.map((i) => i()).filter(Boolean);
-    if (!h.length)
+      ...Object.keys(prevTarget)
+    ]);
+    const animationFactories = [];
+    allTargetKeys.forEach((key) => {
+      var _a;
+      if (this.target[key] === void 0) {
+        this.target[key] = this.baseTarget[key];
+      }
+      if (hasChanged(prevTarget[key], this.target[key])) {
+        (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
+        animationFactories.push(
+          () => {
+            return animate(
+              this.element,
+              {
+                [key]: this.target[key] === "none" ? transformResetValue[key] : this.target[key]
+              },
+              animationOptions[key] || {}
+            );
+          }
+        );
+      }
+    });
+    yield;
+    const animations = animationFactories.map((factory) => factory()).filter(Boolean);
+    if (!animations.length)
       return;
-    const m = this.target;
-    this.element.dispatchEvent(u("motionstart", m));
-    const f = this.activeStates.exit;
-    Promise.all(h).then(() => {
-      this.element.dispatchEvent(u("motioncomplete", {
-        ...m
-      }, f));
-    }).catch(S);
+    const animationTarget = this.target;
+    this.element.dispatchEvent(motionEvent("motionstart", animationTarget));
+    const isExit = this.activeStates.exit;
+    Promise.all(animations).then(() => {
+      this.element.dispatchEvent(motionEvent("motioncomplete", {
+        ...animationTarget
+      }, isExit));
+    }).catch(noop);
   }
   isMounted() {
-    return !!this.element;
+    return Boolean(this.element);
   }
   getDepth() {
     return this.depth;
@@ -121,14 +178,11 @@ class q {
   getOptions() {
     return this.options;
   }
-  getElement() {
-    return this.element;
-  }
   getTarget() {
     return this.target;
   }
 }
 export {
-  q as MotionState,
-  g as mountedStates
+  MotionState,
+  mountedStates
 };

package/dist/es/state/schedule.mjs

@@ -1,22 +1,30 @@
-import { addUniqueItem as i, removeItem as r } from "./utils.mjs";
-let t;
-const n = (e) => e.next(), a = (e) => e.animateUpdates();
-function c() {
-  if (!t)
+import { addUniqueItem, removeItem } from "./utils.mjs";
+let scheduled;
+const fireNext = (iterator) => iterator.next();
+const fireAnimateUpdates = (state) => state.animateUpdates();
+function processScheduledAnimations() {
+  if (!scheduled)
     return;
-  const e = t.sort(m).map(a);
-  e.forEach(n), e.forEach(n), t = void 0;
+  const generators = scheduled.sort(compareByDepth).map(fireAnimateUpdates);
+  generators.forEach(fireNext);
+  generators.forEach(fireNext);
+  scheduled = void 0;
 }
-function u(e) {
-  t ? i(t, e) : (t = [e], requestAnimationFrame(c));
+function scheduleAnimation(state) {
+  if (!scheduled) {
+    scheduled = [state];
+    requestAnimationFrame(processScheduledAnimations);
+  } else {
+    addUniqueItem(scheduled, state);
+  }
 }
-function d(e) {
-  t && r(t, e);
+function unscheduleAnimation(state) {
+  scheduled && removeItem(scheduled, state);
 }
-function m(e, o) {
-  return e.getDepth() - o.getDepth();
+function compareByDepth(a, b) {
+  return a.getDepth() - b.getDepth();
 }
 export {
-  u as scheduleAnimation,
-  d as unscheduleAnimation
+  scheduleAnimation,
+  unscheduleAnimation
 };

package/dist/es/state/style.mjs

@@ -1,93 +1,117 @@
-import { isNumber as p, isCssVar as a } from "./utils.mjs";
-import { isTransform as g, transformAlias as l, transformDefinitions as c, buildTransformTemplate as m } from "./transform.mjs";
-import { isMotionValue as y } from "../utils/motion-value.mjs";
-const S = {
-  get: (r, t) => {
-    let e = a(t) ? r.style.getPropertyValue(t) : getComputedStyle(r)[t];
-    if (!e && e !== "0") {
-      const i = c.get(t);
-      i && (e = i.initialValue);
+import { isCssVar, isNumber } from "./utils.mjs";
+import { transformDefinitions, isTransform, transformAlias, buildTransformTemplate } from "./transform.mjs";
+import { isMotionValue } from "../utils/motion-value.mjs";
+const style = {
+  get: (element, name) => {
+    let value = isCssVar(name) ? element.style.getPropertyValue(name) : getComputedStyle(element)[name];
+    if (!value && value !== "0") {
+      const definition = transformDefinitions.get(name);
+      if (definition)
+        value = definition.initialValue;
     }
-    return e;
+    return value;
   },
-  set: (r, t, e) => {
-    a(t) ? r.style.setProperty(t, e) : r.style[t] = e;
+  set: (element, name, value) => {
+    if (isCssVar(name)) {
+      element.style.setProperty(name, value);
+    } else {
+      element.style[name] = value;
+    }
   }
 };
-function T(r) {
-  var i;
-  const t = {}, e = [];
-  for (let s in r) {
-    let o = r[s];
-    o = y(o) ? o.get() : o, g(s) && s in l && (s = l[s]);
-    let u = Array.isArray(o) ? o[0] : o;
-    const n = c.get(s);
-    n ? (u = p(o) ? (i = n.toDefaultUnit) == null ? void 0 : i.call(n, o) : o, e.push([s, u])) : t[s] = u;
+function createStyles(keyframes) {
+  var _a;
+  const initialKeyframes = {};
+  const transforms = [];
+  for (let key in keyframes) {
+    let value = keyframes[key];
+    value = isMotionValue(value) ? value.get() : value;
+    if (isTransform(key)) {
+      if (key in transformAlias) {
+        key = transformAlias[key];
+      }
+    }
+    let initialKeyframe = Array.isArray(value) ? value[0] : value;
+    const definition = transformDefinitions.get(key);
+    if (definition) {
+      initialKeyframe = isNumber(value) ? (_a = definition.toDefaultUnit) == null ? void 0 : _a.call(definition, value) : value;
+      transforms.push([key, initialKeyframe]);
+    } else {
+      initialKeyframes[key] = initialKeyframe;
+    }
   }
-  return e.length && (t.transform = m(e)), t;
+  if (transforms.length) {
+    initialKeyframes.transform = buildTransformTemplate(transforms);
+  }
+  return initialKeyframes;
 }
-const f = {
-  fill: !0,
-  stroke: !0,
-  strokeWidth: !0,
-  opacity: !0,
-  fillOpacity: !0,
-  strokeOpacity: !0,
-  strokeLinecap: !0,
-  strokeLinejoin: !0,
-  strokeDasharray: !0,
-  strokeDashoffset: !0,
-  cx: !0,
-  cy: !0,
-  r: !0,
-  d: !0,
-  x: !0,
-  y: !0,
-  x1: !0,
-  y1: !0,
-  x2: !0,
-  y2: !0,
-  points: !0,
-  pathLength: !0,
-  transform: !0,
-  viewBox: !0,
-  width: !0,
-  height: !0,
-  preserveAspectRatio: !0,
-  clipPath: !0,
-  filter: !0,
-  mask: !0,
-  stopColor: !0,
-  stopOpacity: !0,
-  gradientTransform: !0,
-  gradientUnits: !0,
-  spreadMethod: !0,
-  markerEnd: !0,
-  markerMid: !0,
-  markerStart: !0,
-  textAnchor: !0,
-  dominantBaseline: !0,
-  fontFamily: !0,
-  fontSize: !0,
-  fontWeight: !0,
-  letterSpacing: !0,
-  vectorEffect: !0
+const SVG_STYLE_TO_ATTRIBUTES = {
+  fill: true,
+  stroke: true,
+  strokeWidth: true,
+  opacity: true,
+  fillOpacity: true,
+  strokeOpacity: true,
+  strokeLinecap: true,
+  strokeLinejoin: true,
+  strokeDasharray: true,
+  strokeDashoffset: true,
+  cx: true,
+  cy: true,
+  r: true,
+  d: true,
+  x: true,
+  y: true,
+  x1: true,
+  y1: true,
+  x2: true,
+  y2: true,
+  points: true,
+  pathLength: true,
+  transform: true,
+  viewBox: true,
+  width: true,
+  height: true,
+  preserveAspectRatio: true,
+  clipPath: true,
+  filter: true,
+  mask: true,
+  stopColor: true,
+  stopOpacity: true,
+  gradientTransform: true,
+  gradientUnits: true,
+  spreadMethod: true,
+  markerEnd: true,
+  markerMid: true,
+  markerStart: true,
+  textAnchor: true,
+  dominantBaseline: true,
+  fontFamily: true,
+  fontSize: true,
+  fontWeight: true,
+  letterSpacing: true,
+  vectorEffect: true
 };
-function v(r) {
-  const t = {}, e = {};
-  for (const i in r)
-    if (i in f) {
-      const s = f[i], o = typeof s == "string" ? s : i, u = r[i];
-      t[o] = y(u) ? u.get() : u;
-    } else
-      e[i] = r[i];
+function convertSvgStyleToAttributes(keyframes) {
+  const attributes = {};
+  const styleProps = {};
+  for (const key in keyframes) {
+    if (key in SVG_STYLE_TO_ATTRIBUTES) {
+      const attrKey = SVG_STYLE_TO_ATTRIBUTES[key];
+      const attrName = typeof attrKey === "string" ? attrKey : key;
+      const value = keyframes[key];
+      attributes[attrName] = isMotionValue(value) ? value.get() : value;
+    } else {
+      styleProps[key] = keyframes[key];
+    }
+  }
   return {
-    attributes: t,
-    style: e
+    attributes,
+    style: styleProps
   };
 }
 export {
-  v as convertSvgStyleToAttributes,
-  T as createStyles,
-  S as style
+  convertSvgStyleToAttributes,
+  createStyles,
+  style
 };

package/dist/es/state/transform.mjs

@@ -1,45 +1,53 @@
-import { noopReturn as s } from "./utils.mjs";
-const a = {
+import { noopReturn } from "./utils.mjs";
+const rotation = {
   syntax: "<angle>",
   initialValue: "0deg",
-  toDefaultUnit: (t) => `${t}deg`
-}, o = {
+  toDefaultUnit: (v) => `${v}deg`
+};
+const baseTransformProperties = {
   translate: {
     syntax: "<length-percentage>",
     initialValue: "0px",
-    toDefaultUnit: (t) => `${t}px`
+    toDefaultUnit: (v) => `${v}px`
   },
-  rotate: a,
+  rotate: rotation,
   scale: {
     syntax: "<number>",
     initialValue: 1,
-    toDefaultUnit: s
+    toDefaultUnit: noopReturn
   },
-  skew: a
-}, l = ["translate", "scale", "rotate", "skew"], i = ["", "X", "Y", "Z"], c = /* @__PURE__ */ new Map(), r = ["transformPerspective", "x", "y", "z", "translateX", "translateY", "translateZ", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skew", "skewX", "skewY"];
-l.forEach((t) => {
-  i.forEach((e) => {
-    r.push(t + e), c.set(
-      t + e,
-      o[t]
+  skew: rotation
+};
+const order = ["translate", "scale", "rotate", "skew"];
+const axes = ["", "X", "Y", "Z"];
+const transformDefinitions = /* @__PURE__ */ new Map();
+const transforms = ["transformPerspective", "x", "y", "z", "translateX", "translateY", "translateZ", "scale", "scaleX", "scaleY", "rotate", "rotateX", "rotateY", "rotateZ", "skew", "skewX", "skewY"];
+order.forEach((name) => {
+  axes.forEach((axis) => {
+    transforms.push(name + axis);
+    transformDefinitions.set(
+      name + axis,
+      baseTransformProperties[name]
     );
   });
 });
-const f = new Set(r), x = (t) => f.has(t), d = {
+const transformLookup = new Set(transforms);
+const isTransform = (name) => transformLookup.has(name);
+const transformAlias = {
   x: "translateX",
   y: "translateY",
   z: "translateZ"
 };
-function u([t], [e]) {
-  return r.indexOf(t) - r.indexOf(e);
+function compareTransformOrder([a], [b]) {
+  return transforms.indexOf(a) - transforms.indexOf(b);
 }
-function m(t, [e, n]) {
-  return `${t} ${e}(${n})`;
+function transformListToString(template, [name, value]) {
+  return `${template} ${name}(${value})`;
 }
-function w(t) {
-  return t.sort(u).reduce(m, "").trim();
+function buildTransformTemplate(transforms2) {
+  return transforms2.sort(compareTransformOrder).reduce(transformListToString, "").trim();
 }
-const k = {
+const transformResetValue = {
   translate: [0, 0],
   rotate: 0,
   scale: 1,
@@ -49,11 +57,11 @@ const k = {
   z: 0
 };
 export {
-  i as axes,
-  w as buildTransformTemplate,
-  u as compareTransformOrder,
-  x as isTransform,
-  d as transformAlias,
-  c as transformDefinitions,
-  k as transformResetValue
+  axes,
+  buildTransformTemplate,
+  compareTransformOrder,
+  isTransform,
+  transformAlias,
+  transformDefinitions,
+  transformResetValue
 };