@animini/core - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

CHANGELOG.md

 # @animini/core
 
+## 0.2.4
+
+### Patch Changes
+
+- a0f7cdb: Adapter inside Animated
+
 ## 0.2.3
@@ -4,0 +10,0 @@

dist/animini-core.cjs.dev.js

@@ -250,3 +250,8 @@ 'use strict';
 class Animated {
-  constructor(value, loop = GlobalLoop) {
+  constructor({
+    value,
+    adapter,
+    el,
+    key
+  }, loop = GlobalLoop) {
     _defineProperty(this, "time", {});
@@ -256,5 +261,8 @@
 
-    this.value = value;
     this.loop = loop;
-    this.children = map(value, (_v, i) => {
+    this.el = el;
+    this.adapter = adapter;
+    this.key = key;
+    this.value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
+    this.children = map(this.value, (_v, i) => {
       return new AnimatedValue(this, i);
@@ -264,2 +272,23 @@ });
 
+  parse(v) {
+    var _this$adapter;
+
+    let fn;
+    return (fn = (_this$adapter = this.adapter) === null || _this$adapter === void 0 ? void 0 : _this$adapter.parse) ? fn(v, this.key, this.el) : v;
+  }
+
+  onChange() {
+    var _this$adapter2;
+
+    let fn;
+    if (fn = (_this$adapter2 = this.adapter) === null || _this$adapter2 === void 0 ? void 0 : _this$adapter2.onChange) fn(this.value, this.key, this.el);
+  }
+
+  get formattedValue() {
+    var _this$adapter3;
+
+    let fn;
+    return (fn = (_this$adapter3 = this.adapter) === null || _this$adapter3 === void 0 ? void 0 : _this$adapter3.format) ? fn(this.value) : this.value;
+  }
+
   get idle() {
@@ -273,6 +302,8 @@ return this._movingChildren <= 0;
   } = {}) {
+    const _to = this.parse(to);
+
     this.time.elapsed = 0;
     this._movingChildren = 0;
     each(this.children, child => {
-      child.start(to, {
+      child.start(_to, {
         immediate,
@@ -294,2 +325,3 @@ easing
     });
+    this.onChange();
   }
@@ -315,12 +347,5 @@
       let idle = true;
-      animations.forEach(({
-        animated,
-        adapter
-      }, key) => {
-        var _adapter$onChange;
-
+      animations.forEach((animated, key) => {
         animated.update();
-        const value = adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(animated.value) : animated.value;
-        currentValues[key] = value;
-        adapter === null || adapter === void 0 ? void 0 : (_adapter$onChange = adapter.onChange) === null || _adapter$onChange === void 0 ? void 0 : _adapter$onChange.call(adapter, value, key, el.current);
+        currentValues[key] = animated.formattedValue;
         idle && (idle = animated.idle);
@@ -343,25 +368,16 @@ });
         for (let key in to) {
-          var _adapter2;
+          let animated = animations.get(key);
 
-          const animation = animations.get(key);
-          let animated;
-          let adapter;
-
-          if (!animation) {
-            const [_value, _adapter] = target.getInitialValueAndAdapter(el.current, key);
-            const value = _adapter !== null && _adapter !== void 0 && _adapter.parseInitial ? _adapter === null || _adapter === void 0 ? void 0 : _adapter.parseInitial(_value, key, el.current) : _value;
-            animated = new Animated(value, loop);
-            adapter = _adapter;
-            animations.set(key, {
-              animated,
-              adapter
-            });
-          } else {
-            animated = animation.animated;
-            adapter = animation.adapter;
+          if (!animated) {
+            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key);
+            animated = new Animated({
+              value,
+              adapter,
+              key,
+              el: el.current
+            }, loop);
+            animations.set(key, animated);
           }
 
-          const _to = (_adapter2 = adapter) !== null && _adapter2 !== void 0 && _adapter2.parse ? adapter.parse(to[key], key, el.current) : to[key];
-
-          animated.start(_to, typeof config === 'function' ? config(key) : config);
+          animated.start(to[key], typeof config === 'function' ? config(key) : config);
           idle && (idle = animated.idle);
@@ -368,0 +384,0 @@ }

dist/animini-core.cjs.prod.js

@@ -250,3 +250,8 @@ 'use strict';
 class Animated {
-  constructor(value, loop = GlobalLoop) {
+  constructor({
+    value,
+    adapter,
+    el,
+    key
+  }, loop = GlobalLoop) {
     _defineProperty(this, "time", {});
@@ -256,5 +261,8 @@
 
-    this.value = value;
     this.loop = loop;
-    this.children = map(value, (_v, i) => {
+    this.el = el;
+    this.adapter = adapter;
+    this.key = key;
+    this.value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
+    this.children = map(this.value, (_v, i) => {
       return new AnimatedValue(this, i);
@@ -264,2 +272,23 @@ });
 
+  parse(v) {
+    var _this$adapter;
+
+    let fn;
+    return (fn = (_this$adapter = this.adapter) === null || _this$adapter === void 0 ? void 0 : _this$adapter.parse) ? fn(v, this.key, this.el) : v;
+  }
+
+  onChange() {
+    var _this$adapter2;
+
+    let fn;
+    if (fn = (_this$adapter2 = this.adapter) === null || _this$adapter2 === void 0 ? void 0 : _this$adapter2.onChange) fn(this.value, this.key, this.el);
+  }
+
+  get formattedValue() {
+    var _this$adapter3;
+
+    let fn;
+    return (fn = (_this$adapter3 = this.adapter) === null || _this$adapter3 === void 0 ? void 0 : _this$adapter3.format) ? fn(this.value) : this.value;
+  }
+
   get idle() {
@@ -273,6 +302,8 @@ return this._movingChildren <= 0;
   } = {}) {
+    const _to = this.parse(to);
+
     this.time.elapsed = 0;
     this._movingChildren = 0;
     each(this.children, child => {
-      child.start(to, {
+      child.start(_to, {
         immediate,
@@ -294,2 +325,3 @@ easing
     });
+    this.onChange();
   }
@@ -315,12 +347,5 @@
       let idle = true;
-      animations.forEach(({
-        animated,
-        adapter
-      }, key) => {
-        var _adapter$onChange;
-
+      animations.forEach((animated, key) => {
         animated.update();
-        const value = adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(animated.value) : animated.value;
-        currentValues[key] = value;
-        adapter === null || adapter === void 0 ? void 0 : (_adapter$onChange = adapter.onChange) === null || _adapter$onChange === void 0 ? void 0 : _adapter$onChange.call(adapter, value, key, el.current);
+        currentValues[key] = animated.formattedValue;
         idle && (idle = animated.idle);
@@ -343,25 +368,16 @@ });
         for (let key in to) {
-          var _adapter2;
+          let animated = animations.get(key);
 
-          const animation = animations.get(key);
-          let animated;
-          let adapter;
-
-          if (!animation) {
-            const [_value, _adapter] = target.getInitialValueAndAdapter(el.current, key);
-            const value = _adapter !== null && _adapter !== void 0 && _adapter.parseInitial ? _adapter === null || _adapter === void 0 ? void 0 : _adapter.parseInitial(_value, key, el.current) : _value;
-            animated = new Animated(value, loop);
-            adapter = _adapter;
-            animations.set(key, {
-              animated,
-              adapter
-            });
-          } else {
-            animated = animation.animated;
-            adapter = animation.adapter;
+          if (!animated) {
+            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key);
+            animated = new Animated({
+              value,
+              adapter,
+              key,
+              el: el.current
+            }, loop);
+            animations.set(key, animated);
           }
 
-          const _to = (_adapter2 = adapter) !== null && _adapter2 !== void 0 && _adapter2.parse ? adapter.parse(to[key], key, el.current) : to[key];
-
-          animated.start(_to, typeof config === 'function' ? config(key) : config);
+          animated.start(to[key], typeof config === 'function' ? config(key) : config);
           idle && (idle = animated.idle);
@@ -368,0 +384,0 @@ }

dist/animini-core.esm.js

@@ -247,3 +247,8 @@ import { c as clamp, l as lerp } from './lerp-839ad04d.esm.js';
 class Animated {
-  constructor(value, loop = GlobalLoop) {
+  constructor({
+    value,
+    adapter,
+    el,
+    key
+  }, loop = GlobalLoop) {
     _defineProperty(this, "time", {});
@@ -253,5 +258,8 @@
 
-    this.value = value;
     this.loop = loop;
-    this.children = map(value, (_v, i) => {
+    this.el = el;
+    this.adapter = adapter;
+    this.key = key;
+    this.value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
+    this.children = map(this.value, (_v, i) => {
       return new AnimatedValue(this, i);
@@ -261,2 +269,23 @@ });
 
+  parse(v) {
+    var _this$adapter;
+
+    let fn;
+    return (fn = (_this$adapter = this.adapter) === null || _this$adapter === void 0 ? void 0 : _this$adapter.parse) ? fn(v, this.key, this.el) : v;
+  }
+
+  onChange() {
+    var _this$adapter2;
+
+    let fn;
+    if (fn = (_this$adapter2 = this.adapter) === null || _this$adapter2 === void 0 ? void 0 : _this$adapter2.onChange) fn(this.value, this.key, this.el);
+  }
+
+  get formattedValue() {
+    var _this$adapter3;
+
+    let fn;
+    return (fn = (_this$adapter3 = this.adapter) === null || _this$adapter3 === void 0 ? void 0 : _this$adapter3.format) ? fn(this.value) : this.value;
+  }
+
   get idle() {
@@ -270,6 +299,8 @@ return this._movingChildren <= 0;
   } = {}) {
+    const _to = this.parse(to);
+
     this.time.elapsed = 0;
     this._movingChildren = 0;
     each(this.children, child => {
-      child.start(to, {
+      child.start(_to, {
         immediate,
@@ -291,2 +322,3 @@ easing
     });
+    this.onChange();
   }
@@ -312,12 +344,5 @@
       let idle = true;
-      animations.forEach(({
-        animated,
-        adapter
-      }, key) => {
-        var _adapter$onChange;
-
+      animations.forEach((animated, key) => {
         animated.update();
-        const value = adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(animated.value) : animated.value;
-        currentValues[key] = value;
-        adapter === null || adapter === void 0 ? void 0 : (_adapter$onChange = adapter.onChange) === null || _adapter$onChange === void 0 ? void 0 : _adapter$onChange.call(adapter, value, key, el.current);
+        currentValues[key] = animated.formattedValue;
         idle && (idle = animated.idle);
@@ -340,25 +365,16 @@ });
         for (let key in to) {
-          var _adapter2;
+          let animated = animations.get(key);
 
-          const animation = animations.get(key);
-          let animated;
-          let adapter;
-
-          if (!animation) {
-            const [_value, _adapter] = target.getInitialValueAndAdapter(el.current, key);
-            const value = _adapter !== null && _adapter !== void 0 && _adapter.parseInitial ? _adapter === null || _adapter === void 0 ? void 0 : _adapter.parseInitial(_value, key, el.current) : _value;
-            animated = new Animated(value, loop);
-            adapter = _adapter;
-            animations.set(key, {
-              animated,
-              adapter
-            });
-          } else {
-            animated = animation.animated;
-            adapter = animation.adapter;
+          if (!animated) {
+            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key);
+            animated = new Animated({
+              value,
+              adapter,
+              key,
+              el: el.current
+            }, loop);
+            animations.set(key, animated);
           }
 
-          const _to = (_adapter2 = adapter) !== null && _adapter2 !== void 0 && _adapter2.parse ? adapter.parse(to[key], key, el.current) : to[key];
-
-          animated.start(_to, typeof config === 'function' ? config(key) : config);
+          animated.start(to[key], typeof config === 'function' ? config(key) : config);
           idle && (idle = animated.idle);
@@ -365,0 +381,0 @@ }

dist/declarations/src/animated/Animated.d.ts

 import type { FrameLoop } from '../FrameLoop';
-import { ParsedValue, ConfigValue } from '../types';
+import { ConfigValue, Adapter, ParsedValue } from '../types';
 declare type Time = {
@@ -7,13 +7,25 @@ elapsed: number;
 };
-export declare class Animated {
-    value: string | ParsedValue;
+declare type Props<ElementType> = {
+    value: any;
+    key?: string | number | symbol;
+    adapter?: Adapter<ElementType>;
+    el?: ElementType;
+};
+export declare class Animated<ElementType> {
     private loop;
+    value: ParsedValue;
     time: Time;
+    private key?;
+    private el?;
+    private adapter?;
     private _movingChildren;
     private children;
-    constructor(value: string | ParsedValue, loop?: FrameLoop);
+    constructor({ value, adapter, el, key }: Props<ElementType>, loop?: FrameLoop);
+    parse(v: any): ParsedValue;
+    onChange(): void;
+    get formattedValue(): any;
     get idle(): boolean;
-    start(to: string | ParsedValue, { immediate, easing }?: ConfigValue): void;
+    start(to: any, { immediate, easing }?: ConfigValue): void;
     update(): void;
 }
 export {};

dist/declarations/src/animated/AnimatedValue.d.ts

 import { ConfigValue, ParsedValue } from '../types';
 import type { Animated } from './Animated';
 export declare class AnimatedValue {
-    parent: Animated;
+    parent: Animated<any>;
     private key;
@@ -16,3 +16,3 @@ private previousValue;
     velocity: number;
-    constructor(parent: Animated, key: number | string);
+    constructor(parent: Animated<any>, key: number | string);
     get time(): {
@@ -19,0 +19,0 @@ elapsed: number;

dist/declarations/src/types.d.ts

 import { AnimatedValue } from './animated/AnimatedValue';
 import { FrameLoop } from './FrameLoop';
 export declare type ParsedValue = number | number[] | Record<string, number>;
-export declare type AdapterFn<ElementType, R> = (value: any, key: string | number | symbol, target: ElementType | undefined | null) => R;
-export declare type Adapter<ElementType, ValueType extends Payload> = {
+export declare type AdapterFn<ElementType, R> = (value: any, key?: string | number | symbol, element?: ElementType | null) => R;
+export declare type Adapter<ElementType> = {
     parse?: AdapterFn<ElementType, ParsedValue>;
@@ -23,3 +23,3 @@ parseInitial?: AdapterFn<ElementType, ParsedValue>;
     setValues?(rawValues: ValueType, element: ElementType): void;
-    getInitialValueAndAdapter<K extends keyof ValueType>(element: ElementType, key: K): [ValueType[K], Adapter<ElementType, ValueType> | undefined];
+    getInitialValueAndAdapter<K extends keyof ValueType>(element: ElementType, key: K): [ValueType[K], Adapter<ElementType> | undefined];
 };
@@ -26,0 +26,0 @@ export declare type ConfigValue = {

package.json

 {
   "name": "@animini/core",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Core of animini",
@@ -5,0 +5,0 @@ "keywords": [],

src/animated/Animated.ts

@@ -5,3 +5,3 @@ import type { FrameLoop } from '../FrameLoop'
 import { lerp } from '../algorithms'
-import { ParsedValue, ConfigValue } from '../types'
+import { ConfigValue, Adapter, ParsedValue } from '../types'
 import { GlobalLoop } from '../FrameLoop'
@@ -16,9 +16,24 @@
 
-export class Animated {
+type Props<ElementType> = {
+  value: any
+  key?: string | number | symbol
+  adapter?: Adapter<ElementType>
+  el?: ElementType
+}
+
+export class Animated<ElementType> {
+  public value: ParsedValue
   public time = {} as Time
+  private key?: string | number | symbol
+  private el?: ElementType
+  private adapter?: Adapter<ElementType>
   private _movingChildren = 0
   private children: AnimatedValue[]
 
-  constructor(public value: string | ParsedValue, private loop: FrameLoop = GlobalLoop) {
-    this.children = map(value, (_v, i) => {
+  constructor({ value, adapter, el, key }: Props<ElementType>, private loop: FrameLoop = GlobalLoop) {
+    this.el = el
+    this.adapter = adapter
+    this.key = key
+    this.value = adapter?.parseInitial ? adapter.parseInitial(value) : value
+    this.children = map(this.value, (_v, i) => {
       return new AnimatedValue(this, i)
@@ -28,2 +43,17 @@ })
 
+  parse(v: any) {
+    let fn
+    return (fn = this.adapter?.parse) ? fn(v, this.key, this.el) : (v as ParsedValue)
+  }
+
+  onChange() {
+    let fn
+    if ((fn = this.adapter?.onChange)) fn(this.value, this.key, this.el)
+  }
+
+  public get formattedValue() {
+    let fn
+    return (fn = this.adapter?.format) ? fn(this.value) : this.value
+  }
+
   get idle() {
@@ -33,3 +63,4 @@ return this._movingChildren <= 0
 
-  start(to: string | ParsedValue, { immediate = false, easing = defaultLerp }: ConfigValue = {}) {
+  start(to: any, { immediate = false, easing = defaultLerp }: ConfigValue = {}) {
+    const _to = this.parse(to)
     this.time.elapsed = 0
@@ -39,3 +70,3 @@ this._movingChildren = 0
     each(this.children, (child) => {
-      child.start(to, { immediate, easing })
+      child.start(_to, { immediate, easing })
       if (!child.idle) this._movingChildren++
@@ -55,3 +86,5 @@ })
     })
+
+    this.onChange()
   }
 }

src/animated/AnimatedValue.ts

@@ -16,3 +16,3 @@ import { ConfigValue, ParsedValue } from '../types'
 
-  constructor(public parent: Animated, private key: number | string) {
+  constructor(public parent: Animated<any>, private key: number | string) {
     this.na = typeof this.value === 'string'
@@ -19,0 +19,0 @@ }

src/buildAnimate.ts

 import { Animated } from './animated/Animated'
 import { GlobalLoop } from './FrameLoop'
-import { Adapter, Config, ParsedValue, Payload, Target } from './types'
+import { Config, Payload, Target } from './types'
 
-type Animation<ElementType, ValueType extends Payload> = {
-  animated: Animated
-  adapter?: Adapter<ElementType, ValueType>
-}
-
 // TODO interpolator
@@ -20,3 +15,3 @@ // TODO chaining ?
     const currentValues: any = {}
-    const animations = new Map<keyof ValueType, Animation<ElementType, ValueType>>()
+    const animations = new Map<keyof ValueType, Animated<ElementType>>()
     let resolveRef: (value?: unknown) => void
@@ -29,8 +24,5 @@ let rejectRef: (value?: unknown) => void
       let idle = true
-      animations.forEach(({ animated, adapter }, key) => {
+      animations.forEach((animated, key) => {
         animated.update()
-
-        const value = adapter?.format ? adapter.format(animated.value) : animated.value
-        currentValues[key] = value
-        adapter?.onChange?.(value, key, el.current)
+        currentValues[key] = animated.formattedValue
         idle &&= animated.idle
@@ -52,19 +44,10 @@ })
         for (let key in to) {
-          const animation = animations.get(key)
-          let animated: Animated
-          let adapter: Adapter<ElementType, ValueType> | undefined
+          let animated = animations.get(key)
 
-          if (!animation) {
-            const [_value, _adapter] = target.getInitialValueAndAdapter(el.current, key)
-            const value = _adapter?.parseInitial ? _adapter?.parseInitial(_value, key, el.current) : _value
-            animated = new Animated(value, loop)
-            adapter = _adapter
-            animations.set(key, { animated, adapter })
-          } else {
-            animated = animation.animated
-            adapter = animation.adapter
+          if (!animated) {
+            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key)
+            animated = new Animated({ value, adapter, key, el: el.current }, loop)
+            animations.set(key, animated)
           }
-
-          const _to = adapter?.parse ? adapter.parse(to[key], key, el.current) : (to[key] as ParsedValue)
-          animated.start(_to, typeof config === 'function' ? config(key) : config)
+          animated.start(to[key], typeof config === 'function' ? config(key) : config)
           idle &&= animated.idle
@@ -71,0 +54,0 @@ }

src/types.ts

@@ -6,10 +6,6 @@ import { AnimatedValue } from './animated/AnimatedValue'
 
-export type AdapterFn<ElementType, R> = (
-  value: any,
-  key: string | number | symbol,
-  target: ElementType | undefined | null
-) => R
+export type AdapterFn<ElementType, R> = (value: any, key?: string | number | symbol, element?: ElementType | null) => R
 
 // TODO fix ValueType
-export type Adapter<ElementType, ValueType extends Payload> = {
+export type Adapter<ElementType> = {
   parse?: AdapterFn<ElementType, ParsedValue>
@@ -38,3 +34,3 @@ parseInitial?: AdapterFn<ElementType, ParsedValue>
     key: K
-  ): [ValueType[K], Adapter<ElementType, ValueType> | undefined]
+  ): [ValueType[K], Adapter<ElementType> | undefined]
 }
@@ -41,0 +37,0 @@

No alert changes

Improved metrics

Total package byte prevSize

72398

increased by0.51%

Lines of code

2268

increased by2.62%

No dependency changes