motion-v 0.3.0 → 0.3.1-beta.1

package/dist/es/state/utils.mjs

@@ -1,43 +1,48 @@
-function s(e, t, r) {
-  if (typeof e == "object")
-    return e;
-  if (e && t) {
-    const n = t[e];
-    return typeof n == "function" ? n(r) : n;
+function resolveVariant(definition, variants, custom) {
+  if (typeof definition === "object") {
+    return definition;
+  } else if (definition && variants) {
+    const variant = variants[definition];
+    return typeof variant === "function" ? variant(custom) : variant;
   }
 }
-function u(e, t) {
-  return typeof e != typeof t ? !0 : Array.isArray(e) && Array.isArray(t) ? !f(e, t) : e !== t;
+function hasChanged(a, b) {
+  if (typeof a !== typeof b)
+    return true;
+  if (Array.isArray(a) && Array.isArray(b))
+    return !shallowCompare(a, b);
+  return a !== b;
 }
-function f(e, t) {
-  const r = t.length;
-  if (r !== e.length)
-    return !1;
-  for (let n = 0; n < r; n++)
-    if (t[n] !== e[n])
-      return !1;
-  return !0;
+function shallowCompare(next, prev) {
+  const prevLength = prev.length;
+  if (prevLength !== next.length)
+    return false;
+  for (let i = 0; i < prevLength; i++) {
+    if (prev[i] !== next[i])
+      return false;
+  }
+  return true;
 }
-function l(e, t) {
-  !e.includes(t) && e.push(t);
+function addUniqueItem(array, item) {
+  !array.includes(item) && array.push(item);
 }
-function a(e, t) {
-  const r = e.indexOf(t);
-  r !== -1 && e.splice(r, 1);
+function removeItem(array, item) {
+  const index = array.indexOf(item);
+  index !== -1 && array.splice(index, 1);
 }
-function c(e, t) {
-  return e[t] ? { ...e, ...e[t] } : { ...e };
+function getOptions(options, key) {
+  return options[key] ? { ...options, ...options[key] } : { ...options };
 }
-function p(e) {
-  return e == null ? void 0 : e.startsWith("--");
+function isCssVar(name) {
+  return name == null ? void 0 : name.startsWith("--");
 }
-function g() {
+function noop() {
 }
-const h = (e) => e;
-function m(e) {
-  return typeof e == "number";
+const noopReturn = (v) => v;
+function isNumber(value) {
+  return typeof value === "number";
 }
-const i = [
+const svgElements = [
   "animate",
   "circle",
   "defs",
@@ -93,21 +98,22 @@ const i = [
   "linearGradient",
   "radialGradient",
   "textPath"
-], o = new Set(i);
-function d(e) {
-  return o.has(e);
+];
+const svgElementSet = new Set(svgElements);
+function isSVGElement(as) {
+  return svgElementSet.has(as);
 }
 export {
-  l as addUniqueItem,
-  c as getOptions,
-  u as hasChanged,
-  p as isCssVar,
-  m as isNumber,
-  d as isSVGElement,
-  g as noop,
-  h as noopReturn,
-  a as removeItem,
-  s as resolveVariant,
-  f as shallowCompare,
-  i as svgElements
+  addUniqueItem,
+  getOptions,
+  hasChanged,
+  isCssVar,
+  isNumber,
+  isSVGElement,
+  noop,
+  noopReturn,
+  removeItem,
+  resolveVariant,
+  shallowCompare,
+  svgElements
 };

package/dist/es/utils/createContext.mjs

@@ -1,17 +1,25 @@
-import { inject as c, provide as s } from "vue";
-function x(t, r) {
-  const e = typeof t == "string" && !r ? `${t}Context` : r, i = Symbol(e);
-  return [(n) => {
-    const o = c(i, n);
-    if (o || o === null)
-      return o;
+import { inject, provide } from "vue";
+function createContext(providerComponentName, contextName) {
+  const symbolDescription = typeof providerComponentName === "string" && !contextName ? `${providerComponentName}Context` : contextName;
+  const injectionKey = Symbol(symbolDescription);
+  const injectContext = (fallback) => {
+    const context = inject(injectionKey, fallback);
+    if (context)
+      return context;
+    if (context === null)
+      return context;
     throw new Error(
-      `Injection \`${i.toString()}\` not found. Component must be used within ${Array.isArray(t) ? `one of the following components: ${t.join(
+      `Injection \`${injectionKey.toString()}\` not found. Component must be used within ${Array.isArray(providerComponentName) ? `one of the following components: ${providerComponentName.join(
         ", "
-      )}` : `\`${t}\``}`
+      )}` : `\`${providerComponentName}\``}`
     );
-  }, (n) => (s(i, n), n)];
+  };
+  const provideContext = (contextValue) => {
+    provide(injectionKey, contextValue);
+    return contextValue;
+  };
+  return [injectContext, provideContext];
 }
 export {
-  x as createContext
+  createContext
 };

package/dist/es/utils/events.mjs

@@ -1,8 +1,8 @@
-function i(t, n, e) {
-  t.dispatchEvent(
-    new CustomEvent(n, { detail: { originalEvent: e } })
+function dispatchPointerEvent(element, name, event) {
+  element.dispatchEvent(
+    new CustomEvent(name, { detail: { originalEvent: event } })
   );
 }
 export {
-  i as dispatchPointerEvent
+  dispatchPointerEvent
 };

package/dist/es/utils/motion-value.mjs

@@ -1,6 +1,6 @@
-function t(o) {
-  return !!(o && o.getVelocity);
+function isMotionValue(value) {
+  return Boolean(value && value.getVelocity);
 }
 export {
-  t as isMotionValue
+  isMotionValue
 };

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

@@ -1,14 +1,20 @@
-import { onBeforeUpdate as m, onUnmounted as c } from "vue";
-import { frame as r, cancelFrame as p } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
-function d(i) {
-  let e = 0;
-  const t = ({ timestamp: o, delta: a }) => {
-    e || (e = o), i(o - e, a);
-  }, n = () => p(t);
-  m(() => {
-    n(), r.update(t, !0);
-  }), c(() => n()), r.update(t, !0);
+import { onBeforeUpdate, onUnmounted } from "vue";
+import { frame, cancelFrame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+function useAnimationFrame(callback) {
+  let initialTimestamp = 0;
+  const provideTimeSinceStart = ({ timestamp, delta }) => {
+    if (!initialTimestamp)
+      initialTimestamp = timestamp;
+    callback(timestamp - initialTimestamp, delta);
+  };
+  const cancel = () => cancelFrame(provideTimeSinceStart);
+  onBeforeUpdate(() => {
+    cancel();
+    frame.update(provideTimeSinceStart, true);
+  });
+  onUnmounted(() => cancel());
+  frame.update(provideTimeSinceStart, true);
 }
 export {
-  d as useAnimationFrame
+  useAnimationFrame
 };

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

@@ -1,19 +1,25 @@
-import { ref as i, watch as l, isRef as v, unref as c } from "vue";
-import { inView as f } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/viewport/index.mjs";
-function V(n, e) {
-  const r = i(!1);
-  return l([n, () => v(e) ? e.value : e], (s, o) => {
-    const t = c(e) || {}, { once: u } = t;
-    if (!n.value || u && r.value)
+import { ref, watch, isRef, unref } from "vue";
+import { inView } from "../external/.pnpm/framer-motion@11.11.11/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) => {
+    const realOptions = unref(options) || {};
+    const { once } = realOptions;
+    if (!domRef.value || once && isInView.value) {
       return;
-    const a = () => (r.value = !0, u ? void 0 : () => {
-      r.value = !1;
-    });
-    return f(n.value, a, t);
+    }
+    const onEnter = () => {
+      isInView.value = true;
+      return once ? void 0 : () => {
+        isInView.value = false;
+      };
+    };
+    return inView(domRef.value, onEnter, realOptions);
   }, {
-    immediate: !0
-  }), r;
+    immediate: true
+  });
+  return isInView;
 }
 export {
-  V as useInView
+  useInView
 };

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

@@ -1,22 +1,27 @@
-import { onUnmounted as m } from "vue";
-import { motionValue as i } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { cancelFrame as p, frame as f } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
-function h(o) {
-  const t = i(o()), n = () => t.set(o()), u = () => f.preRender(n, !1, !0);
-  let r;
-  const c = (e) => {
-    r = e.map((a) => a.on("change", u));
-  }, s = () => {
-    r.forEach((e) => e()), p(n);
+import { onUnmounted } from "vue";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { cancelFrame, frame } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+function useCombineMotionValues(combineValues) {
+  const value = motionValue(combineValues());
+  const updateValue = () => value.set(combineValues());
+  const scheduleUpdate = () => frame.preRender(updateValue, false, true);
+  let subscriptions;
+  const subscribe = (values) => {
+    subscriptions = values.map((v) => v.on("change", scheduleUpdate));
   };
-  return m(() => {
-    s();
-  }), {
-    subscribe: c,
-    unsubscribe: s,
-    value: t
+  const unsubscribe = () => {
+    subscriptions.forEach((unsubscribe2) => unsubscribe2());
+    cancelFrame(updateValue);
+  };
+  onUnmounted(() => {
+    unsubscribe();
+  });
+  return {
+    subscribe,
+    unsubscribe,
+    value
   };
 }
 export {
-  h as useCombineMotionValues
+  useCombineMotionValues
 };

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

@@ -1,13 +1,20 @@
-import { useCombineMotionValues as n } from "./use-combine-values.mjs";
-import { collectMotionValues as r } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { onBeforeUpdate as c } from "vue";
-function b(e) {
-  r.current = [];
-  const { value: t, subscribe: o, unsubscribe: u } = n(e);
-  return o(r.current), r.current = void 0, c(() => {
-    u(), r.current = [], e(), o(r.current), r.current = void 0;
-  }), t;
+import { useCombineMotionValues } from "./use-combine-values.mjs";
+import { collectMotionValues } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { onBeforeUpdate } from "vue";
+function useComputed(computed) {
+  collectMotionValues.current = [];
+  const { value, subscribe, unsubscribe } = useCombineMotionValues(computed);
+  subscribe(collectMotionValues.current);
+  collectMotionValues.current = void 0;
+  onBeforeUpdate(() => {
+    unsubscribe();
+    collectMotionValues.current = [];
+    computed();
+    subscribe(collectMotionValues.current);
+    collectMotionValues.current = void 0;
+  });
+  return value;
 }
 export {
-  b as useComputed
+  useComputed
 };

package/dist/es/value/use-motion-template.mjs

@@ -1,19 +1,22 @@
-import { useCombineMotionValues as c } from "./use-combine-values.mjs";
-import { isMotionValue as i } from "../utils/motion-value.mjs";
-function p(n, ...u) {
-  const r = n.length;
-  function l() {
-    let e = "";
-    for (let t = 0; t < r; t++) {
-      e += n[t];
-      const o = u[t];
-      o && (e += i(o) ? o.get() : o);
+import { useCombineMotionValues } from "./use-combine-values.mjs";
+import { isMotionValue } from "../utils/motion-value.mjs";
+function useMotionTemplate(fragments, ...values) {
+  const numFragments = fragments.length;
+  function buildValue() {
+    let output = "";
+    for (let i = 0; i < numFragments; i++) {
+      output += fragments[i];
+      const value2 = values[i];
+      if (value2) {
+        output += isMotionValue(value2) ? value2.get() : value2;
+      }
     }
-    return e;
+    return output;
   }
-  const { value: s, subscribe: m } = c(l);
-  return m(u.filter(i)), s;
+  const { value, subscribe } = useCombineMotionValues(buildValue);
+  subscribe(values.filter(isMotionValue));
+  return value;
 }
 export {
-  p as useMotionTemplate
+  useMotionTemplate
 };

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

@@ -1,47 +1,56 @@
-import { onMounted as d, onUnmounted as m, watch as n } from "vue";
-import { warning as p } from "../node_modules/.pnpm/hey-listen@1.0.8/node_modules/hey-listen/dist/hey-listen.es.mjs";
-import { motionValue as l } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { scroll as v } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/render/dom/scroll/index.mjs";
-function i(s, o) {
-  p(
-    !!(!o || o.value),
-    `You have defined a ${s} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref.`
+import { onMounted, onUnmounted, watch } from "vue";
+import { warning } from "../external/.pnpm/hey-listen@1.0.8/external/hey-listen/dist/hey-listen.es.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { scroll } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
+function refWarning(name, ref) {
+  warning(
+    Boolean(!ref || ref.value),
+    `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref.`
   );
 }
-function h() {
+function createScrollMotionValues() {
   return {
-    scrollX: l(0),
-    scrollY: l(0),
-    scrollXProgress: l(0),
-    scrollYProgress: l(0)
+    scrollX: motionValue(0),
+    scrollY: motionValue(0),
+    scrollXProgress: motionValue(0),
+    scrollYProgress: motionValue(0)
   };
 }
-function g({
-  container: s,
-  target: o,
-  ...u
+function useScroll({
+  container,
+  target,
+  ...options
 } = {}) {
-  const e = h();
-  let r;
-  const c = () => {
-    r == null || r(), r = v(
-      (Y, { x: t, y: f }) => {
-        e.scrollX.set(t.current), e.scrollXProgress.set(t.progress), e.scrollY.set(f.current), e.scrollYProgress.set(f.progress);
+  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);
       },
       {
-        ...u,
-        container: (s == null ? void 0 : s.value) ?? void 0,
-        target: (o == null ? void 0 : o.value) ?? void 0
+        ...options,
+        container: (container == null ? void 0 : container.value) ?? void 0,
+        target: (target == null ? void 0 : target.value) ?? void 0
       }
     );
   };
-  return d(() => {
-    i("target", o), i("container", s), c();
-  }), m(() => r == null ? void 0 : r()), n(
-    () => [s == null ? void 0 : s.value, o == null ? void 0 : o.value, u.offset],
-    c
-  ), e;
+  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
+  );
+  return values;
 }
 export {
-  g as useScroll
+  useScroll
 };

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

@@ -1,39 +1,59 @@
-import { watch as c, onBeforeUnmount as g } from "vue";
-import { animateValue as y } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
-import { motionValue as d } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-import { frame as S, frameData as V } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/frameloop/frame.mjs";
-import { isMotionValue as l } from "../utils/motion-value.mjs";
-function p(t) {
-  return typeof t == "number" ? t : parseFloat(t);
+import { watch, onBeforeUnmount } from "vue";
+import { animateValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+import { frame, frameData } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/frameloop/frame.mjs";
+import { isMotionValue } from "../utils/motion-value.mjs";
+function toNumber(v) {
+  if (typeof v === "number")
+    return v;
+  return parseFloat(v);
 }
-function U(t, r = {}) {
-  let o = null;
-  const n = d(
-    l(t) ? p(t.get()) : t
+function useSpring(source, config = {}) {
+  let activeSpringAnimation = null;
+  const value = motionValue(
+    isMotionValue(source) ? toNumber(source.get()) : source
   );
-  let a = n.get(), i = () => {
+  let latestValue = value.get();
+  let latestSetter = () => {
   };
-  const m = () => {
-    o && (o.stop(), o = null);
-  }, f = () => {
-    const e = o;
-    (e == null ? void 0 : e.time) === 0 && e.sample(V.delta), m(), o = y({
-      keyframes: [n.get(), a],
-      velocity: n.getVelocity(),
+  const stopAnimation = () => {
+    if (activeSpringAnimation) {
+      activeSpringAnimation.stop();
+      activeSpringAnimation = null;
+    }
+  };
+  const startAnimation = () => {
+    const animation = activeSpringAnimation;
+    if ((animation == null ? void 0 : animation.time) === 0) {
+      animation.sample(frameData.delta);
+    }
+    stopAnimation();
+    activeSpringAnimation = animateValue({
+      keyframes: [value.get(), latestValue],
+      velocity: value.getVelocity(),
       type: "spring",
       restDelta: 1e-3,
       restSpeed: 0.01,
-      ...r,
-      onUpdate: i
+      ...config,
+      onUpdate: latestSetter
     });
   };
-  return c(() => JSON.stringify(r), () => {
-    const e = n.attach((s, u) => (a = s, i = u, S.update(f), n.get()), m);
-    g(() => e());
-  }, { immediate: !0 }), l(t) && t.on("change", (e) => {
-    n.set(p(e));
-  }), n;
+  watch(() => JSON.stringify(config), () => {
+    const cleanup = value.attach((v, set) => {
+      latestValue = v;
+      latestSetter = set;
+      frame.update(startAnimation);
+      return value.get();
+    }, stopAnimation);
+    onBeforeUnmount(() => cleanup());
+  }, { immediate: true });
+  if (isMotionValue(source)) {
+    source.on("change", (v) => {
+      value.set(toNumber(v));
+    });
+  }
+  return value;
 }
 export {
-  U as useSpring
+  useSpring
 };

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

@@ -1,9 +1,10 @@
-import { useAnimationFrame as e } from "../utils/use-animation-frame.mjs";
-import { motionValue as m } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/value/index.mjs";
-function n() {
-  const o = m(0);
-  return e((t) => o.set(t)), o;
+import { useAnimationFrame } from "../utils/use-animation-frame.mjs";
+import { motionValue } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/value/index.mjs";
+function useTime() {
+  const time = motionValue(0);
+  useAnimationFrame((t) => time.set(t));
+  return time;
 }
 export {
-  n as useTime
+  useTime
 };

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

@@ -1,25 +1,29 @@
-import { useComputed as u } from "./use-computed.mjs";
-import { useCombineMotionValues as c } from "./use-combine-values.mjs";
-import { transform as i } from "../node_modules/.pnpm/framer-motion@11.11.11/node_modules/framer-motion/dist/es/utils/transform.mjs";
-function b(o, t, r, s) {
-  if (typeof o == "function")
-    return u(o);
-  const e = typeof t == "function" ? t : i(t, r, s);
-  return Array.isArray(o) ? m(
-    o,
-    e
-  ) : m([o], ([f]) => e(f));
+import { useComputed } from "./use-computed.mjs";
+import { useCombineMotionValues } from "./use-combine-values.mjs";
+import { transform } from "../external/.pnpm/framer-motion@11.11.11/external/framer-motion/dist/es/utils/transform.mjs";
+function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+  if (typeof input === "function") {
+    return useComputed(input);
+  }
+  const transformer = typeof inputRangeOrTransformer === "function" ? inputRangeOrTransformer : transform(inputRangeOrTransformer, outputRange, options);
+  return Array.isArray(input) ? useListTransform(
+    input,
+    transformer
+  ) : useListTransform([input], ([latest]) => transformer(latest));
 }
-function m(o, t) {
-  const r = [], { value: s, subscribe: e } = c(() => {
-    r.length = 0;
-    const f = o.length;
-    for (let n = 0; n < f; n++)
-      r[n] = o[n].get();
-    return t(r);
+function useListTransform(values, transformer) {
+  const latest = [];
+  const { value, subscribe } = useCombineMotionValues(() => {
+    latest.length = 0;
+    const numValues = values.length;
+    for (let i = 0; i < numValues; i++) {
+      latest[i] = values[i].get();
+    }
+    return transformer(latest);
   });
-  return e(o), s;
+  subscribe(values);
+  return value;
 }
 export {
-  b as useTransform
+  useTransform
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.3.0",
+  "version": "0.3.1-beta.1",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -52,6 +52,7 @@
     "./dist"
   ],
   "dependencies": {
+    "@vueuse/core": "^12.0.0",
     "framer-motion": "11.11.11"
   },
   "devDependencies": {

package/dist/es/node_modules/.pnpm/@vueuse_shared@11.1.0_vue@3.4.38_typescript@5.5.4_/node_modules/@vueuse/shared/index.mjs

@@ -1,6 +0,0 @@
-import "vue";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const n = (e) => typeof e < "u";
-export {
-  n as isDef
-};