@ssgoi/core 0.0.2 → 2.0.0

package/dist/index.js

@@ -1,41 +1,110 @@
-var E = Object.defineProperty;
-var R = (o, t, n) => t in o ? E(o, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[t] = n;
-var d = (o, t, n) => R(o, typeof t != "symbol" ? t + "" : t, n);
-import { animate as P } from "popmotion";
-import { g as b } from "./utils-DR41YsAh.js";
-class v {
+var j = Object.defineProperty;
+var T = (e, t, n) => t in e ? j(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var y = (e, t, n) => T(e, typeof t != "symbol" ? t + "" : t, n);
+import { animate as R } from "popmotion";
+import { g as P } from "./utils-DR41YsAh.js";
+class V {
   constructor(t) {
-    d(this, "options");
-    d(this, "currentValue");
-    d(this, "velocity", 0);
-    d(this, "isAnimating", !1);
-    d(this, "controls", null);
-    d(this, "animate", (t = !1) => {
+    y(this, "options");
+    y(this, "currentValue");
+    y(this, "velocity");
+    y(this, "isAnimating", !1);
+    y(this, "controls", null);
+    // For object animations
+    y(this, "animationMap", null);
+    y(this, "activeAnimations", /* @__PURE__ */ new Set());
+    y(this, "completedAnimations", /* @__PURE__ */ new Set());
+    y(this, "updatedProperties", /* @__PURE__ */ new Set());
+    y(this, "animate", (t = !1) => {
       !this.isAnimating && this.options.onStart && this.options.onStart(), this.isAnimating = !0;
       const n = t ? this.options.from : this.options.to;
-      let s = this.currentValue, c = performance.now();
-      this.controls = P({
+      if (typeof this.currentValue == "object" && this.currentValue !== null) {
+        this.animateObject(n, t);
+        return;
+      }
+      let i = this.currentValue, a = performance.now();
+      const u = {
         from: this.currentValue,
         to: n,
-        velocity: this.velocity * 1e3,
-        // Convert to px/s
         stiffness: this.options.spring.stiffness,
         damping: this.options.spring.damping,
-        mass: 1,
-        onUpdate: (u) => {
-          const l = performance.now(), S = (l - c) / 1e3;
-          if (S > 0) {
-            const w = (u - s) / S;
-            this.velocity = w / 1e3, s = u, c = l;
+        mass: 1
+      };
+      typeof this.velocity == "number" && (u.velocity = this.velocity * 1e3), this.controls = R({
+        ...u,
+        onUpdate: (l) => {
+          const m = performance.now(), p = (m - a) / 1e3;
+          if (p > 0) {
+            if (typeof l == "number" && typeof i == "number") {
+              const f = (l - i) / p;
+              this.velocity = f / 1e3;
+            } else if (typeof l == "object" && l !== null) {
+              const f = {};
+              Object.keys(l).forEach((d) => {
+                const r = l[d], o = i[d];
+                if (typeof r == "number" && typeof o == "number") {
+                  const c = (r - o) / p;
+                  f[d] = c / 1e3;
+                }
+              }), this.velocity = f;
+            }
+            i = l, a = m;
           }
-          this.currentValue = u, this.options.onUpdate(u);
+          this.currentValue = l, this.options.onUpdate(l);
         },
         onComplete: () => {
-          this.currentValue = n, this.isAnimating = !1, this.controls = null, this.velocity = 0, this.options.onComplete();
+          this.currentValue = n, this.isAnimating = !1, this.controls = null, typeof this.velocity == "object" && this.velocity !== null ? Object.keys(this.velocity).forEach((l) => {
+            this.velocity[l] = 0;
+          }) : this.velocity = 0, this.options.onComplete();
         }
       });
     });
-    this.options = {
+    y(this, "animateObject", (t, n) => {
+      const i = this.currentValue, a = Object.keys(i);
+      this.animationMap = /* @__PURE__ */ new Map(), this.activeAnimations.clear(), this.completedAnimations.clear(), this.updatedProperties.clear();
+      const u = { ...i }, l = {};
+      let m = !1;
+      const p = () => {
+        const f = a.filter((r) => !this.completedAnimations.has(r));
+        if (f.every((r) => this.updatedProperties.has(r)) && f.length > 0) {
+          if (typeof this.velocity == "object" && this.velocity) {
+            const r = performance.now();
+            Object.keys(u).forEach((o) => {
+              if (l[o]) {
+                const c = (r - l[o]) / 1e3, s = this.currentValue[o], h = u[o];
+                typeof s == "number" && typeof h == "number" && c > 0 && (this.velocity[o] = (h - s) / c / 1e3);
+              }
+              l[o] = r;
+            });
+          }
+          this.currentValue = { ...u }, this.options.onUpdate(this.currentValue), this.updatedProperties.clear(), !m && this.options.onStart && (m = !0, this.options.onStart());
+        }
+      };
+      a.forEach((f) => {
+        this.activeAnimations.add(f);
+        const d = {
+          from: i[f],
+          to: t[f],
+          stiffness: this.options.spring.stiffness,
+          damping: this.options.spring.damping,
+          mass: 1
+        };
+        typeof this.velocity == "object" && this.velocity && f in this.velocity && (d.velocity = this.velocity[f] * 1e3);
+        const r = R({
+          ...d,
+          onUpdate: (o) => {
+            u[f] = o, this.updatedProperties.add(f), p();
+          },
+          onComplete: () => {
+            this.completedAnimations.add(f), this.updatedProperties.delete(f), this.completedAnimations.size === a.length && (this.currentValue = t, this.isAnimating = !1, this.animationMap = null, typeof this.velocity == "object" && this.velocity && Object.keys(this.velocity).forEach((o) => {
+              this.velocity[o] = 0;
+            }), this.options.onComplete());
+          }
+        });
+        this.animationMap.set(f, r);
+      });
+    });
+    if (this.options = {
       from: t.from ?? 0,
       to: t.to ?? 1,
       spring: t.spring ?? { stiffness: 100, damping: 10 },
@@ -44,7 +113,13 @@ class v {
       onComplete: t.onComplete ?? (() => {
       }),
       onStart: t.onStart
-    }, this.currentValue = this.options.from;
+    }, this.currentValue = this.options.from, typeof this.options.from == "object" && this.options.from !== null) {
+      const n = {};
+      Object.keys(this.options.from).forEach((i) => {
+        n[i] = 0;
+      }), this.velocity = n;
+    } else
+      this.velocity = 0;
   }
   // Animation control methods
   forward() {
@@ -56,12 +131,17 @@ class v {
   reverse() {
     const t = this.options.from;
     if (this.options.from = this.options.to, this.options.to = t, this.isAnimating) {
-      const n = this.currentValue > (this.options.from + this.options.to) / 2;
+      const n = this.shouldReverse();
       this.stop(), this.animate(!n);
     }
   }
+  shouldReverse() {
+    return typeof this.currentValue == "number" && typeof this.options.from == "number" && typeof this.options.to == "number" ? this.currentValue > (this.options.from + this.options.to) / 2 : !1;
+  }
   stop() {
-    this.isAnimating = !1, this.controls && (this.controls.stop(), this.controls = null);
+    this.isAnimating = !1, this.controls && (this.controls.stop(), this.controls = null), this.animationMap && (this.animationMap.forEach((t) => {
+      t.stop();
+    }), this.animationMap.clear(), this.animationMap = null), this.updatedProperties.clear();
   }
   // State getters
   getVelocity() {
@@ -76,7 +156,9 @@ class v {
   getCurrentState() {
     return {
       position: this.currentValue,
-      velocity: this.velocity
+      velocity: this.velocity,
+      from: this.options.from,
+      to: this.options.to
     };
   }
   // State setters
@@ -89,223 +171,256 @@ class v {
   // Configuration
   updateOptions(t) {
     if (this.options = { ...this.options, ...t }, this.isAnimating && this.controls) {
-      const n = this.currentValue < this.options.to;
+      const n = this.shouldReverse();
       this.stop(), this.animate(!n);
     }
   }
   // Static factory method
   static fromState(t, n) {
-    const s = new v(n);
-    return s.setValue(t.position), s.setVelocity(t.velocity), s;
+    const i = new V(n);
+    return i.setValue(t.position), i.setVelocity(t.velocity), i;
   }
 }
-function k(o, t) {
-  let n = null, s = null, c = null, u = null, l = !1;
-  const S = async (f) => {
-    var h;
-    if (n && n.getIsAnimating() && !l) {
-      const m = n.getCurrentState();
-      n.stop(), s && (s.remove(), s = null), l = !0;
-      const e = o();
-      if (!e.out) return;
-      const r = await Promise.resolve(e.out(f));
-      n = v.fromState(m, {
-        from: 1,
-        to: 0,
-        spring: r.spring,
-        onStart: r.onStart,
-        onUpdate: (i) => {
-          var a;
-          (a = r.tick) == null || a.call(r, i);
-        },
-        onComplete: () => {
-          var i;
-          n = null, l = !1, (i = r.onEnd) == null || i.call(r);
-        }
-      }), n.backward();
-      return;
+const x = Symbol.for("TRANSITION_STRATEGY"), M = (e) => ({
+  runIn: async (t) => {
+    const { currentAnimation: n } = e;
+    if (n && n.direction === "out") {
+      const l = n.animator.getCurrentState();
+      if (n.animator.stop(), t.out) {
+        const m = await t.out, { from: p = 1, to: f = 0 } = m;
+        return {
+          config: m,
+          state: l,
+          from: p,
+          // OUT animation's from
+          to: f,
+          // OUT animation's to
+          direction: "backward"
+          // Will actually go 0→1
+        };
+      }
     }
-    if (!n || !n.getIsAnimating()) {
-      l = !0;
-      const m = o();
-      if (!m.in) return;
-      const e = await Promise.resolve(m.in(f));
-      (h = e.prepare) == null || h.call(e, f), n = new v({
+    const i = await t.in;
+    if (!i)
+      return {
+        state: { position: 0, velocity: 0 },
         from: 0,
         to: 1,
-        spring: e.spring,
-        onStart: e.onStart,
-        onUpdate: (r) => {
-          var i;
-          (i = e.tick) == null || i.call(e, r);
-        },
-        onComplete: () => {
-          var r;
-          n = null, l = !1, (r = e.onEnd) == null || r.call(e);
-        }
-      }), n.forward();
+        direction: "forward"
+      };
+    const { from: a = 0, to: u = 1 } = i;
+    return {
+      config: i,
+      state: { position: a, velocity: 0 },
+      from: a,
+      to: u,
+      direction: "forward"
+    };
+  },
+  runOut: async (t) => {
+    const { currentAnimation: n } = e;
+    if (n && n.direction === "in") {
+      const l = n.animator.getCurrentState();
+      if (n.animator.stop(), t.in) {
+        const m = await t.in, { from: p = 0, to: f = 1 } = m;
+        return {
+          config: m,
+          state: {
+            position: l.position,
+            velocity: l.velocity
+          },
+          from: p,
+          // IN animation's from
+          to: f,
+          // IN animation's to
+          direction: "backward"
+          // Will actually go 1→0
+        };
+      }
     }
-  };
-  function w(f) {
-    const h = () => {
-      !c || !s || (u && c.contains(u) ? c.insertBefore(s, u) : c.appendChild(s));
-    }, m = () => {
-      var r;
-      s && (s.remove(), s = null), n = null, l = !1, (r = t == null ? void 0 : t.onCleanupEnd) == null || r.call(t);
-    }, e = o();
-    if (s = f.cloneNode(!0), n && n.getIsAnimating() && l) {
-      const r = n.getCurrentState();
-      if (n.stop(), l = !1, !e.in) {
-        s = null, m();
-        return;
+    const i = await t.out;
+    if (!i)
+      return {
+        state: { position: 1, velocity: 0 },
+        from: 1,
+        to: 0,
+        direction: "forward"
+      };
+    const { from: a = 1, to: u = 0 } = i;
+    return {
+      config: i,
+      state: { position: a, velocity: 0 },
+      from: a,
+      to: u,
+      direction: "forward"
+    };
+  }
+});
+function U(e, t) {
+  var d;
+  let n = null, i = null, a = null, u = null;
+  const l = {
+    get currentAnimation() {
+      return n;
+    }
+  }, m = ((d = t == null ? void 0 : t.strategy) == null ? void 0 : d.call(t, l)) || M(l), p = async (r) => {
+    var g, b;
+    i && (i.remove(), i = null);
+    const o = e(), c = {
+      in: o.in && Promise.resolve(o.in(r)),
+      out: o.out && Promise.resolve(o.out(r))
+    }, s = await m.runIn(c);
+    if (!s.config)
+      return;
+    (b = (g = s.config).prepare) == null || b.call(g, r);
+    const h = V.fromState(s.state, {
+      from: s.from,
+      to: s.to,
+      spring: s.config.spring,
+      onStart: s.config.onStart,
+      onUpdate: s.config.tick,
+      onComplete: () => {
+        var v, w;
+        n = null, (w = (v = s.config) == null ? void 0 : v.onEnd) == null || w.call(v);
       }
-      Promise.resolve(e.in(s)).then(async (i) => {
-        var p;
-        const a = s && await ((p = e.out) == null ? void 0 : p.call(e, s));
-        a != null && a.prepare && s && a.prepare(s), h(), n = v.fromState(r, {
-          from: 0,
-          to: 1,
-          spring: i.spring,
-          onStart: i.onStart,
-          onUpdate: (y) => {
-            var A;
-            (A = i.tick) == null || A.call(i, y);
-          },
-          onComplete: () => {
-            var y;
-            (y = i.onEnd) == null || y.call(i), m();
-          }
-        }), n.backward();
-      });
+    });
+    n = { animator: h, direction: "in" }, s.direction === "forward" ? h.forward() : h.backward();
+  }, f = async (r) => {
+    var b, v;
+    i = r;
+    const o = e(), c = {
+      in: o.in && Promise.resolve(o.in(r)),
+      out: o.out && Promise.resolve(o.out(r))
+    }, s = await m.runOut(c);
+    if (!s.config)
       return;
-    }
-    if (!n || !n.getIsAnimating() || !l) {
-      if (l = !1, !e.out) {
-        s = null, m();
-        return;
+    (v = (b = s.config).prepare) == null || v.call(b, r), g();
+    const h = V.fromState(s.state, {
+      from: s.from,
+      to: s.to,
+      spring: s.config.spring,
+      onStart: s.config.onStart,
+      onUpdate: s.config.tick,
+      onComplete: () => {
+        var w, E, O;
+        (E = (w = s.config) == null ? void 0 : w.onEnd) == null || E.call(w), i && (i.remove(), i = null), n = null, (O = t == null ? void 0 : t.onCleanupEnd) == null || O.call(t);
       }
-      Promise.resolve(e.out(s)).then((r) => {
-        var i;
-        s && ((i = r.prepare) == null || i.call(r, s)), h(), n = new v({
-          from: 1,
-          to: 0,
-          spring: r.spring,
-          onStart: r.onStart,
-          onUpdate: (a) => {
-            var p;
-            (p = r.tick) == null || p.call(r, a);
-          },
-          onComplete: () => {
-            var a;
-            (a = r.onEnd) == null || a.call(r), m();
-          }
-        }), n.forward();
-      });
+    });
+    n = { animator: h, direction: "out" }, s.direction === "forward" ? h.forward() : h.backward();
+    function g() {
+      !a || !i || (u && a.contains(u) ? a.insertBefore(i, u) : a.appendChild(i));
     }
-  }
-  return (f) => f ? (c = f.parentElement, u = f.nextElementSibling, o().in && S(f), () => {
-    w(f);
-  }) : void 0;
+  };
+  return (r) => {
+    if (r)
+      return a = r.parentElement, u = r.nextElementSibling, p(r), () => {
+        const o = r.cloneNode(!0);
+        f(o);
+      };
+  };
 }
-const g = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map();
-function U(o, t) {
-  g.set(o, t);
-  let n = x.get(o);
-  return n || (n = k(
+const A = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Map();
+function I(e, t, n) {
+  A.set(e, t);
+  let i = C.get(e);
+  return i || (i = U(
     () => {
-      const s = g.get(o);
-      return s || (console.warn(`Transition "${String(o)}" not found`), {});
+      const a = A.get(e);
+      return a || (console.warn(`Transition "${String(e)}" not found`), {});
     },
     {
-      onCleanupEnd: () => I(o)
+      strategy: n,
+      onCleanupEnd: () => D(e)
     }
-  ), x.set(o, n), n);
+  ), C.set(e, i), i);
 }
-function I(o) {
-  g.delete(o), x.delete(o);
+function D(e) {
+  A.delete(e), C.delete(e);
 }
-function L(o) {
-  return U(o.key, {
-    in: o.in,
-    out: o.out
-  });
+function Y(e) {
+  return I(e.key, {
+    in: e.in,
+    out: e.out
+  }, e[x]);
 }
-function W(o) {
+function _(e) {
   let t = null;
-  const n = [...o.transitions], s = [];
-  for (const e of o.transitions)
-    e.symmetric && (n.some(
-      (i) => i.from === e.to && i.to === e.from
-    ) || s.push({
-      from: e.to,
-      to: e.from,
-      transition: e.transition
+  const n = [...e.transitions], i = [];
+  for (const o of e.transitions)
+    o.symmetric && (n.some(
+      (s) => s.from === o.to && s.to === o.from
+    ) || i.push({
+      from: o.to,
+      to: o.from,
+      transition: o.transition
       // Don't add symmetric flag to the reverse to avoid infinite loop
     }));
-  n.push(...s);
-  let c = null;
+  n.push(...i);
+  let a = null;
   const u = /* @__PURE__ */ new Map();
   let l = null;
-  const S = () => {
-    c && l && u.set(l, {
-      x: c.scrollLeft,
-      y: c.scrollTop
+  const m = () => {
+    a && l && u.set(l, {
+      x: a.scrollLeft,
+      y: a.scrollTop
     });
-  }, w = (e, r) => {
-    c || (c = b(e), c.addEventListener("scroll", S, {
+  }, p = (o, c) => {
+    a || (a = P(o), a.addEventListener("scroll", m, {
       passive: !0
-    })), l = r;
+    })), l = c;
   }, f = () => {
-    const e = t == null ? void 0 : t.from, r = t == null ? void 0 : t.to, i = e && u.has(e) ? u.get(e) : { x: 0, y: 0 }, a = r && u.has(r) ? u.get(r) : { x: 0, y: 0 };
+    const o = t == null ? void 0 : t.from, c = t == null ? void 0 : t.to, s = o && u.has(o) ? u.get(o) : { x: 0, y: 0 }, h = c && u.has(c) ? u.get(c) : { x: 0, y: 0 };
     return {
-      x: -a.x + i.x,
-      y: -a.y + i.y
+      x: -h.x + s.x,
+      y: -h.y + s.y
     };
   };
-  function h() {
+  function d() {
     if (t != null && t.from && (t != null && t.to)) {
-      const r = T(
+      const c = N(
         t.from,
         t.to,
         n
-      ) || o.defaultTransition, a = { scrollOffset: f() };
-      r && (r.out && t.outResolve && t.outResolve(
-        (p) => r.out(p, a)
-      ), r.in && t.inResolve && t.inResolve(
-        (p) => r.in(p, a)
+      ) || e.defaultTransition, h = { scrollOffset: f() };
+      c && (c.out && t.outResolve && t.outResolve(
+        (g) => c.out(g, h)
+      ), c.in && t.inResolve && t.inResolve(
+        (g) => c.in(g, h)
       )), t = null;
     }
   }
-  const m = async (e, r) => r === "in" && (!t || !t.from) ? () => ({}) : (t || (t = {}), r === "out" ? (t.from = e, new Promise((i) => {
-    t.outResolve = i, h();
-  })) : (t.to = e, new Promise((i) => {
-    t.inResolve = i, h();
+  const r = async (o, c) => c === "in" && (!t || !t.from) ? () => ({}) : (t || (t = {}), c === "out" ? (t.from = o, new Promise((s) => {
+    t.outResolve = s, d();
+  })) : (t.to = o, new Promise((s) => {
+    t.inResolve = s, d();
   })));
-  return (e) => ({
-    key: e,
-    in: async (r) => (w(r, e), (await m(e, "in"))(r)),
-    out: async (r) => (await m(e, "out"))(r)
+  return (o) => ({
+    key: o,
+    in: async (c) => (p(c, o), (await r(o, "in"))(c)),
+    out: async (c) => (await r(o, "out"))(c)
   });
 }
-function T(o, t, n) {
-  for (const s of n)
-    if (V(o, s.from) && V(t, s.to))
-      return s.transition;
-  for (const s of n)
-    if ((s.from === "*" || V(o, s.from)) && (s.to === "*" || V(t, s.to)))
-      return s.transition;
+function N(e, t, n) {
+  for (const i of n)
+    if (S(e, i.from) && S(t, i.to))
+      return i.transition;
+  for (const i of n)
+    if ((i.from === "*" || S(e, i.from)) && (i.to === "*" || S(t, i.to)))
+      return i.transition;
   return null;
 }
-function V(o, t) {
+function S(e, t) {
   if (t === "*")
     return !0;
   if (t.endsWith("/*")) {
     const n = t.slice(0, -2);
-    return o === n || o.startsWith(n + "/");
+    return e === n || e.startsWith(n + "/");
   }
-  return o === t;
+  return e === t;
 }
 export {
-  W as createSggoiTransitionContext,
-  L as transition
+  x as TRANSITION_STRATEGY,
+  M as createDefaultStrategy,
+  _ as createSggoiTransitionContext,
+  Y as transition
 };

package/dist/presets/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s={stiffness:170,damping:26},n={stiffness:120,damping:14},t={stiffness:180,damping:12},e={stiffness:210,damping:20},f={stiffness:280,damping:60},i={stiffness:280,damping:120},o={default:s,gentle:n,wobbly:t,stiff:e,slow:f,molasses:i};exports.config=o;exports.defaultSpring=s;exports.gentle=n;exports.molasses=i;exports.slow=f;exports.stiff=e;exports.wobbly=t;

package/dist/presets/index.d.ts

@@ -0,0 +1,16 @@
+import { SpringConfig } from '../types';
+export declare const defaultSpring: SpringConfig;
+export declare const gentle: SpringConfig;
+export declare const wobbly: SpringConfig;
+export declare const stiff: SpringConfig;
+export declare const slow: SpringConfig;
+export declare const molasses: SpringConfig;
+export declare const config: {
+    readonly default: SpringConfig;
+    readonly gentle: SpringConfig;
+    readonly wobbly: SpringConfig;
+    readonly stiff: SpringConfig;
+    readonly slow: SpringConfig;
+    readonly molasses: SpringConfig;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/presets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/presets/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,eAAO,MAAM,aAAa,EAAE,YAG3B,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,YAGpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,YAGpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,YAGnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,YAGlB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,YAGtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAC"}

package/dist/presets/index.js

@@ -0,0 +1,35 @@
+const s = {
+  stiffness: 170,
+  damping: 26
+}, n = {
+  stiffness: 120,
+  damping: 14
+}, t = {
+  stiffness: 180,
+  damping: 12
+}, f = {
+  stiffness: 210,
+  damping: 20
+}, i = {
+  stiffness: 280,
+  damping: 60
+}, e = {
+  stiffness: 280,
+  damping: 120
+}, o = {
+  default: s,
+  gentle: n,
+  wobbly: t,
+  stiff: f,
+  slow: i,
+  molasses: e
+};
+export {
+  o as config,
+  s as defaultSpring,
+  n as gentle,
+  e as molasses,
+  i as slow,
+  f as stiff,
+  t as wobbly
+};