@animini/core - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

 # @animini/core
 
+## 0.1.4
+
+### Patch Changes
+
+- a7b464c: dom: immediate transition to NaN strings
+
 ## 0.1.3
@@ -4,0 +10,0 @@

dist/animini-core.cjs.dev.js

@@ -24,3 +24,3 @@ 'use strict';
 class AnimatedValue {
-  constructor(parent, index) {
+  constructor(parent, key) {
     _defineProperty(this, "precision", 1);
@@ -35,3 +35,4 @@
     this.parent = parent;
-    this.index = index;
+    this.key = key;
+    this.na = typeof this.value === 'string';
   }
@@ -44,20 +45,29 @@
   get value() {
-    return this.index !== -1 ? this.parent.value[this.index] : this.parent.value;
+    return this.key !== -1 ? this.parent.value[this.key] : this.parent.value;
   }
 
   set value(value) {
-    this.index !== -1 ? this.parent.value[this.index] = value : this.parent.value = value;
+    this.key !== -1 ? this.parent.value[this.key] = value : this.parent.value = value;
   }
 
   start(to, config) {
+    this.to = this.key === -1 ? to : to[this.key];
     this.config = config;
     this.from = this.value;
-    this.to = this.index === -1 ? to : to[this.index];
-    this.distance = this.to - this.from;
-    this.startVelocity = this.velocity;
+
+    if (!this.na) {
+      this.distance = this.to - this.from;
+      this.startVelocity = this.velocity;
+      this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
+    }
+
     this.idle = config.immediate && this.to === this.value;
-    this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
   }
 
   update() {
+    if (this.na) {
+      this.value = this.to;
+      this.idle = true;
+    }
+
     if (this.idle) return this.value;
@@ -266,3 +276,3 @@ this.previousValue = this.value;
     this._movingChildren = 0;
-    each(this.children, (child, key) => {
+    each(this.children, child => {
       child.start(to, {
@@ -269,0 +279,0 @@ immediate,

dist/animini-core.cjs.prod.js

@@ -24,3 +24,3 @@ 'use strict';
 class AnimatedValue {
-  constructor(parent, index) {
+  constructor(parent, key) {
     _defineProperty(this, "precision", 1);
@@ -35,3 +35,4 @@
     this.parent = parent;
-    this.index = index;
+    this.key = key;
+    this.na = typeof this.value === 'string';
   }
@@ -44,20 +45,29 @@
   get value() {
-    return this.index !== -1 ? this.parent.value[this.index] : this.parent.value;
+    return this.key !== -1 ? this.parent.value[this.key] : this.parent.value;
   }
 
   set value(value) {
-    this.index !== -1 ? this.parent.value[this.index] = value : this.parent.value = value;
+    this.key !== -1 ? this.parent.value[this.key] = value : this.parent.value = value;
   }
 
   start(to, config) {
+    this.to = this.key === -1 ? to : to[this.key];
     this.config = config;
     this.from = this.value;
-    this.to = this.index === -1 ? to : to[this.index];
-    this.distance = this.to - this.from;
-    this.startVelocity = this.velocity;
+
+    if (!this.na) {
+      this.distance = this.to - this.from;
+      this.startVelocity = this.velocity;
+      this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
+    }
+
     this.idle = config.immediate && this.to === this.value;
-    this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
   }
 
   update() {
+    if (this.na) {
+      this.value = this.to;
+      this.idle = true;
+    }
+
     if (this.idle) return this.value;
@@ -266,3 +276,3 @@ this.previousValue = this.value;
     this._movingChildren = 0;
-    each(this.children, (child, key) => {
+    each(this.children, child => {
       child.start(to, {
@@ -269,0 +279,0 @@ immediate,

dist/animini-core.esm.js

@@ -21,3 +21,3 @@ import { useRef, useMemo, useCallback, useEffect } from 'react';
 class AnimatedValue {
-  constructor(parent, index) {
+  constructor(parent, key) {
     _defineProperty(this, "precision", 1);
@@ -32,3 +32,4 @@
     this.parent = parent;
-    this.index = index;
+    this.key = key;
+    this.na = typeof this.value === 'string';
   }
@@ -41,20 +42,29 @@
   get value() {
-    return this.index !== -1 ? this.parent.value[this.index] : this.parent.value;
+    return this.key !== -1 ? this.parent.value[this.key] : this.parent.value;
   }
 
   set value(value) {
-    this.index !== -1 ? this.parent.value[this.index] = value : this.parent.value = value;
+    this.key !== -1 ? this.parent.value[this.key] = value : this.parent.value = value;
   }
 
   start(to, config) {
+    this.to = this.key === -1 ? to : to[this.key];
     this.config = config;
     this.from = this.value;
-    this.to = this.index === -1 ? to : to[this.index];
-    this.distance = this.to - this.from;
-    this.startVelocity = this.velocity;
+
+    if (!this.na) {
+      this.distance = this.to - this.from;
+      this.startVelocity = this.velocity;
+      this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
+    }
+
     this.idle = config.immediate && this.to === this.value;
-    this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
   }
 
   update() {
+    if (this.na) {
+      this.value = this.to;
+      this.idle = true;
+    }
+
     if (this.idle) return this.value;
@@ -263,3 +273,3 @@ this.previousValue = this.value;
     this._movingChildren = 0;
-    each(this.children, (child, key) => {
+    each(this.children, child => {
       child.start(to, {
@@ -266,0 +276,0 @@ immediate,

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

@@ -8,3 +8,3 @@ import type { FrameLoop } from '../FrameLoop';
 export declare class Animated {
-    value: ParsedValue;
+    value: string | ParsedValue;
     private loop;
@@ -14,7 +14,7 @@ time: Time;
     private children;
-    constructor(value: ParsedValue, loop?: FrameLoop);
+    constructor(value: string | ParsedValue, loop?: FrameLoop);
     get idle(): boolean;
-    start(to: ParsedValue, { immediate, easing }?: ConfigValue): void;
+    start(to: string | ParsedValue, { immediate, easing }?: ConfigValue): void;
     update(): void;
 }
 export {};

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

@@ -5,3 +5,3 @@ import { ConfigValue, ParsedValue } from '../types';
     parent: Animated;
-    private index;
+    private key;
     private previousValue;
@@ -11,2 +11,3 @@ startVelocity: number;
     to: number;
+    private na;
     private precision;
@@ -17,3 +18,3 @@ private config;
     velocity: number;
-    constructor(parent: Animated, index: number | string);
+    constructor(parent: Animated, key: number | string);
     get time(): {
@@ -25,4 +26,4 @@ elapsed: number;
     set value(value: any);
-    start(to: ParsedValue, config: Required<ConfigValue>): void;
+    start(to: string | ParsedValue, config: Required<ConfigValue>): void;
     update(): any;
 }

dist/declarations/src/types.d.ts

@@ -8,3 +8,3 @@ import { AnimatedValue } from './animated/AnimatedValue';
     parseInitial?: AdapterFn<ElementType, ParsedValue>;
-    format?(value: ParsedValue): any;
+    format?(value: string | ParsedValue): any;
     onChange?: AdapterFn<ElementType, void>;
@@ -11,0 +11,0 @@ };

package.json

 {
   "name": "@animini/core",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "small animation lib",
@@ -5,0 +5,0 @@ "keywords": [],

src/animated/Animated.ts

@@ -20,3 +20,3 @@ import type { FrameLoop } from '../FrameLoop'
 
-  constructor(public value: ParsedValue, private loop: FrameLoop = GlobalLoop) {
+  constructor(public value: string | ParsedValue, private loop: FrameLoop = GlobalLoop) {
     this.children = map(value, (_v, i) => {
@@ -31,7 +31,7 @@ return new AnimatedValue(this, i)
 
-  start(to: ParsedValue, { immediate = false, easing = defaultLerp }: ConfigValue = {}) {
+  start(to: string | ParsedValue, { immediate = false, easing = defaultLerp }: ConfigValue = {}) {
     this.time.elapsed = 0
     this._movingChildren = 0
 
-    each(this.children, (child, key) => {
+    each(this.children, (child) => {
       child.start(to, { immediate, easing })
@@ -38,0 +38,0 @@ if (!child.idle) this._movingChildren++

src/animated/AnimatedValue.ts

@@ -9,2 +9,3 @@ import { ConfigValue, ParsedValue } from '../types'
   public to!: number
+  private na: boolean // non applicable transition
   private precision: number = 1
@@ -16,3 +17,5 @@ private config!: Required<ConfigValue>
 
-  constructor(public parent: Animated, private index: number | string) {}
+  constructor(public parent: Animated, private key: number | string) {
+    this.na = typeof this.value === 'string'
+  }
   get time() {
@@ -22,20 +25,25 @@ return this.parent.time
   get value() {
-    return this.index !== -1 ? (this.parent.value as any)[this.index] : this.parent.value
+    return this.key !== -1 ? (this.parent.value as any)[this.key] : this.parent.value
   }
   set value(value) {
-    this.index !== -1 ? ((this.parent.value as any)[this.index] = value) : (this.parent.value = value)
+    this.key !== -1 ? ((this.parent.value as any)[this.key] = value) : (this.parent.value = value)
   }
 
-  start(to: ParsedValue, config: Required<ConfigValue>) {
+  start(to: string | ParsedValue, config: Required<ConfigValue>) {
+    this.to = this.key === -1 ? to : (to as any)[this.key]
     this.config = config
     this.from = this.value
-    this.to = this.index === -1 ? to : (to as any)[this.index]
-    this.distance = this.to - this.from
-    this.startVelocity = this.velocity
-
+    if (!this.na) {
+      this.distance = this.to - this.from
+      this.startVelocity = this.velocity
+      this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1)
+    }
     this.idle = config.immediate && this.to === this.value
-    this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1)
   }
 
   update() {
+    if (this.na) {
+      this.value = this.to
+      this.idle = true
+    }
     if (this.idle) return this.value
@@ -42,0 +50,0 @@

src/types.ts

@@ -13,6 +13,7 @@ import { AnimatedValue } from './animated/AnimatedValue'
 
+// TODO fix ValueType
 export type Adapter<ElementType, ValueType extends Payload> = {
   parse?: AdapterFn<ElementType, ParsedValue>
   parseInitial?: AdapterFn<ElementType, ParsedValue>
-  format?(value: ParsedValue): any
+  format?(value: string | ParsedValue): any
   onChange?: AdapterFn<ElementType, void>
@@ -19,0 +20,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

74574

increased by1.06%

Lines of code

2240

increased by1.45%

No dependency changes