@animini/core - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

CHANGELOG.md

 # @animini/core
 
+## 0.0.4
+
+### Patch Changes
+
+- 748a414: perf: use prototype getter and setter which leads to massive perf increase
+
 ## 0.0.3
@@ -4,0 +10,0 @@

dist/animini-core.cjs.dev.js

@@ -9,49 +9,35 @@ 'use strict';
 
-function lerp(v0, v1, t) {
-  return v0 * (1 - t) + v1 * t;
+function AnimatedValue(parent, index) {
+  this.distance = this.velocity = 0;
+  this.idle = true;
+  this.parent = parent;
+  this.index = index;
 }
-function equal(v0, v1) {
-  if (Array.isArray(v0)) {
-    return v0.every((val, index) => val === v1[index]);
-  }
+AnimatedValue.prototype = {
+  get fn() {
+    return this.parent.fn;
+  },
 
-  return v0 === v1;
-}
-function each(array, iterator) {
-  if (Array.isArray(array)) {
-    for (let i = 0; i < array.length; i++) iterator(array[i], i);
-  } else {
-    iterator(array, -1);
-  }
-}
-function map(obj, iterator) {
-  if (typeof obj === 'object') {
-    if (Array.isArray(obj)) {
-      return obj.map(iterator);
-    }
+  get config() {
+    return this.parent.config;
+  },
 
-    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  get time() {
+    return this.parent.time;
+  },
+
+  get target() {
+    return this.index !== -1 ? this.parent.target[this.index] : this.parent.target;
+  },
+
+  get value() {
+    return this.index !== -1 ? this.parent._value[this.index] : this.parent._value;
+  },
+
+  set value(value) {
+    this.index !== -1 ? this.parent._value[this.index] = value : this.parent._value = value;
   }
 
-  return iterator(obj, -1);
-}
-function getset(self, key, getter, setter) {
-  const obj = {};
-  if (getter) obj.get = getter;
-  if (setter) obj.set = setter;
-  if (getter) Object.defineProperty(self, key, obj);
-}
+};
 
-function AnimatedValue(parent, index) {
-  this.distance = this.velocity = 0;
-  this.idle = true;
-  this.parent = parent;
-  const hasKey = index !== -1;
-  getset(this, 'fn', () => parent.fn);
-  getset(this, 'config', () => parent.config);
-  getset(this, 'time', () => parent.time);
-  getset(this, 'target', () => ~index ? parent.target[index] : parent.target);
-  getset(this, 'value', () => hasKey ? parent._value[index] : parent._value, value => hasKey ? parent._value[index] = value : parent._value = value);
-}
-
 AnimatedValue.prototype.start = function () {
@@ -87,2 +73,31 @@ this.previousValue = this.value;
 
+function lerp(v0, v1, t) {
+  return v0 * (1 - t) + v1 * t;
+}
+function equal(v0, v1) {
+  if (Array.isArray(v0)) {
+    return v0.every((val, index) => val === v1[index]);
+  }
+
+  return v0 === v1;
+}
+function each(array, iterator) {
+  if (Array.isArray(array)) {
+    for (let i = 0; i < array.length; i++) iterator(array[i], i);
+  } else {
+    iterator(array, -1);
+  }
+}
+function map(obj, iterator) {
+  if (typeof obj === 'object') {
+    if (Array.isArray(obj)) {
+      return obj.map(iterator);
+    }
+
+    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  }
+
+  return iterator(obj, -1);
+}
+
 function lerpFn() {
@@ -92,6 +107,2 @@ return lerp(this.value, this.target, this.config.factor || 0.05);
 
-function getLength(v) {
-  return typeof v === 'object' ? Array.isArray(v) ? v.length : Object.keys(v).length : 1;
-}
-
 function Animated(value, fn, adapter, loop) {
@@ -101,13 +112,23 @@ this.config = {};
   this.loop = loop;
+  this.adapter = adapter;
+  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
+  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
   this._movingChildren = 0;
-  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
-  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
   this.setFn(fn);
   this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
-  this.length = getLength(this._value);
   this.children = map(this._value, (_v, i) => new AnimatedValue(this, i));
-  getset(this, 'idle', () => this._movingChildren <= 0);
-  getset(this, 'value', () => adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(this._value) : this._value);
 }
+Animated.prototype = {
+  get idle() {
+    return this._movingChildren <= 0;
+  },
 
+  get value() {
+    var _this$adapter;
+
+    return (_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.format ? this.adapter.format(this._value) : this._value;
+  }
+
+};
+
 Animated.prototype.setFn = function (fn = lerpFn) {
@@ -273,5 +294,4 @@ if (typeof fn === 'function') {
 exports.equal = equal;
-exports.getset = getset;
 exports.lerp = lerp;
 exports.map = map;
 exports.useAniminiCore = useAniminiCore;

dist/animini-core.cjs.prod.js

@@ -9,49 +9,35 @@ 'use strict';
 
-function lerp(v0, v1, t) {
-  return v0 * (1 - t) + v1 * t;
+function AnimatedValue(parent, index) {
+  this.distance = this.velocity = 0;
+  this.idle = true;
+  this.parent = parent;
+  this.index = index;
 }
-function equal(v0, v1) {
-  if (Array.isArray(v0)) {
-    return v0.every((val, index) => val === v1[index]);
-  }
+AnimatedValue.prototype = {
+  get fn() {
+    return this.parent.fn;
+  },
 
-  return v0 === v1;
-}
-function each(array, iterator) {
-  if (Array.isArray(array)) {
-    for (let i = 0; i < array.length; i++) iterator(array[i], i);
-  } else {
-    iterator(array, -1);
-  }
-}
-function map(obj, iterator) {
-  if (typeof obj === 'object') {
-    if (Array.isArray(obj)) {
-      return obj.map(iterator);
-    }
+  get config() {
+    return this.parent.config;
+  },
 
-    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  get time() {
+    return this.parent.time;
+  },
+
+  get target() {
+    return this.index !== -1 ? this.parent.target[this.index] : this.parent.target;
+  },
+
+  get value() {
+    return this.index !== -1 ? this.parent._value[this.index] : this.parent._value;
+  },
+
+  set value(value) {
+    this.index !== -1 ? this.parent._value[this.index] = value : this.parent._value = value;
   }
 
-  return iterator(obj, -1);
-}
-function getset(self, key, getter, setter) {
-  const obj = {};
-  if (getter) obj.get = getter;
-  if (setter) obj.set = setter;
-  if (getter) Object.defineProperty(self, key, obj);
-}
+};
 
-function AnimatedValue(parent, index) {
-  this.distance = this.velocity = 0;
-  this.idle = true;
-  this.parent = parent;
-  const hasKey = index !== -1;
-  getset(this, 'fn', () => parent.fn);
-  getset(this, 'config', () => parent.config);
-  getset(this, 'time', () => parent.time);
-  getset(this, 'target', () => ~index ? parent.target[index] : parent.target);
-  getset(this, 'value', () => hasKey ? parent._value[index] : parent._value, value => hasKey ? parent._value[index] = value : parent._value = value);
-}
-
 AnimatedValue.prototype.start = function () {
@@ -87,2 +73,31 @@ this.previousValue = this.value;
 
+function lerp(v0, v1, t) {
+  return v0 * (1 - t) + v1 * t;
+}
+function equal(v0, v1) {
+  if (Array.isArray(v0)) {
+    return v0.every((val, index) => val === v1[index]);
+  }
+
+  return v0 === v1;
+}
+function each(array, iterator) {
+  if (Array.isArray(array)) {
+    for (let i = 0; i < array.length; i++) iterator(array[i], i);
+  } else {
+    iterator(array, -1);
+  }
+}
+function map(obj, iterator) {
+  if (typeof obj === 'object') {
+    if (Array.isArray(obj)) {
+      return obj.map(iterator);
+    }
+
+    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  }
+
+  return iterator(obj, -1);
+}
+
 function lerpFn() {
@@ -92,6 +107,2 @@ return lerp(this.value, this.target, this.config.factor || 0.05);
 
-function getLength(v) {
-  return typeof v === 'object' ? Array.isArray(v) ? v.length : Object.keys(v).length : 1;
-}
-
 function Animated(value, fn, adapter, loop) {
@@ -101,13 +112,23 @@ this.config = {};
   this.loop = loop;
+  this.adapter = adapter;
+  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
+  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
   this._movingChildren = 0;
-  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
-  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
   this.setFn(fn);
   this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
-  this.length = getLength(this._value);
   this.children = map(this._value, (_v, i) => new AnimatedValue(this, i));
-  getset(this, 'idle', () => this._movingChildren <= 0);
-  getset(this, 'value', () => adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(this._value) : this._value);
 }
+Animated.prototype = {
+  get idle() {
+    return this._movingChildren <= 0;
+  },
 
+  get value() {
+    var _this$adapter;
+
+    return (_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.format ? this.adapter.format(this._value) : this._value;
+  }
+
+};
+
 Animated.prototype.setFn = function (fn = lerpFn) {
@@ -273,5 +294,4 @@ if (typeof fn === 'function') {
 exports.equal = equal;
-exports.getset = getset;
 exports.lerp = lerp;
 exports.map = map;
 exports.useAniminiCore = useAniminiCore;

dist/animini-core.esm.js

@@ -5,49 +5,35 @@ import { useRef, useMemo, useEffect, useCallback } from 'react';
 
-function lerp(v0, v1, t) {
-  return v0 * (1 - t) + v1 * t;
+function AnimatedValue(parent, index) {
+  this.distance = this.velocity = 0;
+  this.idle = true;
+  this.parent = parent;
+  this.index = index;
 }
-function equal(v0, v1) {
-  if (Array.isArray(v0)) {
-    return v0.every((val, index) => val === v1[index]);
-  }
+AnimatedValue.prototype = {
+  get fn() {
+    return this.parent.fn;
+  },
 
-  return v0 === v1;
-}
-function each(array, iterator) {
-  if (Array.isArray(array)) {
-    for (let i = 0; i < array.length; i++) iterator(array[i], i);
-  } else {
-    iterator(array, -1);
-  }
-}
-function map(obj, iterator) {
-  if (typeof obj === 'object') {
-    if (Array.isArray(obj)) {
-      return obj.map(iterator);
-    }
+  get config() {
+    return this.parent.config;
+  },
 
-    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  get time() {
+    return this.parent.time;
+  },
+
+  get target() {
+    return this.index !== -1 ? this.parent.target[this.index] : this.parent.target;
+  },
+
+  get value() {
+    return this.index !== -1 ? this.parent._value[this.index] : this.parent._value;
+  },
+
+  set value(value) {
+    this.index !== -1 ? this.parent._value[this.index] = value : this.parent._value = value;
   }
 
-  return iterator(obj, -1);
-}
-function getset(self, key, getter, setter) {
-  const obj = {};
-  if (getter) obj.get = getter;
-  if (setter) obj.set = setter;
-  if (getter) Object.defineProperty(self, key, obj);
-}
+};
 
-function AnimatedValue(parent, index) {
-  this.distance = this.velocity = 0;
-  this.idle = true;
-  this.parent = parent;
-  const hasKey = index !== -1;
-  getset(this, 'fn', () => parent.fn);
-  getset(this, 'config', () => parent.config);
-  getset(this, 'time', () => parent.time);
-  getset(this, 'target', () => ~index ? parent.target[index] : parent.target);
-  getset(this, 'value', () => hasKey ? parent._value[index] : parent._value, value => hasKey ? parent._value[index] = value : parent._value = value);
-}
-
 AnimatedValue.prototype.start = function () {
@@ -83,2 +69,31 @@ this.previousValue = this.value;
 
+function lerp(v0, v1, t) {
+  return v0 * (1 - t) + v1 * t;
+}
+function equal(v0, v1) {
+  if (Array.isArray(v0)) {
+    return v0.every((val, index) => val === v1[index]);
+  }
+
+  return v0 === v1;
+}
+function each(array, iterator) {
+  if (Array.isArray(array)) {
+    for (let i = 0; i < array.length; i++) iterator(array[i], i);
+  } else {
+    iterator(array, -1);
+  }
+}
+function map(obj, iterator) {
+  if (typeof obj === 'object') {
+    if (Array.isArray(obj)) {
+      return obj.map(iterator);
+    }
+
+    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  }
+
+  return iterator(obj, -1);
+}
+
 function lerpFn() {
@@ -88,6 +103,2 @@ return lerp(this.value, this.target, this.config.factor || 0.05);
 
-function getLength(v) {
-  return typeof v === 'object' ? Array.isArray(v) ? v.length : Object.keys(v).length : 1;
-}
-
 function Animated(value, fn, adapter, loop) {
@@ -97,13 +108,23 @@ this.config = {};
   this.loop = loop;
+  this.adapter = adapter;
+  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
+  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
   this._movingChildren = 0;
-  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
-  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
   this.setFn(fn);
   this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
-  this.length = getLength(this._value);
   this.children = map(this._value, (_v, i) => new AnimatedValue(this, i));
-  getset(this, 'idle', () => this._movingChildren <= 0);
-  getset(this, 'value', () => adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(this._value) : this._value);
 }
+Animated.prototype = {
+  get idle() {
+    return this._movingChildren <= 0;
+  },
 
+  get value() {
+    var _this$adapter;
+
+    return (_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.format ? this.adapter.format(this._value) : this._value;
+  }
+
+};
+
 Animated.prototype.setFn = function (fn = lerpFn) {
@@ -264,2 +285,2 @@ if (typeof fn === 'function') {
 
-export { FrameLoop, GlobalLoop, each, equal, getset, lerp, map, useAniminiCore };
+export { FrameLoop, GlobalLoop, each, equal, lerp, map, useAniminiCore };

package.json

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

src/animated/Animated.js

 import { AnimatedValue } from './AnimatedValue'
-import { each, map, getset, lerp } from '../utils'
+import { each, map, lerp } from '../utils'
 
@@ -8,6 +8,2 @@ function lerpFn() {
 
-function getLength(v) {
-  return typeof v === 'object' ? (Array.isArray(v) ? v.length : Object.keys(v).length) : 1
-}
-
 export function Animated(value, fn, adapter, loop) {
@@ -17,15 +13,21 @@ this.config = {}
   this.loop = loop
+  this.adapter = adapter
+  this.onUpdate = adapter?.onUpdate
+  this.parse = adapter?.parse
 
   this._movingChildren = 0
-  this.parse = adapter?.parse
-  this.onUpdate = adapter?.onUpdate
   this.setFn(fn)
 
   this._value = adapter?.parseInitial ? adapter.parseInitial(value) : value
-  this.length = getLength(this._value)
 
   this.children = map(this._value, (_v, i) => new AnimatedValue(this, i))
+}
 
-  getset(this, 'idle', () => this._movingChildren <= 0)
-  getset(this, 'value', () => (adapter?.format ? adapter.format(this._value) : this._value))
+Animated.prototype = {
+  get idle() {
+    return this._movingChildren <= 0
+  },
+  get value() {
+    return this.adapter?.format ? this.adapter.format(this._value) : this._value
+  },
 }
@@ -32,0 +34,0 @@

src/animated/AnimatedValue.js

@@ -1,3 +0,1 @@
-import { getset } from '../utils'
-
 export function AnimatedValue(parent, index) {
@@ -7,14 +5,24 @@ this.distance = this.velocity = 0
   this.parent = parent
-  const hasKey = index !== -1
+  this.index = index
+}
 
-  getset(this, 'fn', () => parent.fn)
-  getset(this, 'config', () => parent.config)
-  getset(this, 'time', () => parent.time)
-  getset(this, 'target', () => (~index ? parent.target[index] : parent.target))
-  getset(
-    this,
-    'value',
-    () => (hasKey ? parent._value[index] : parent._value),
-    (value) => (hasKey ? (parent._value[index] = value) : (parent._value = value))
-  )
+AnimatedValue.prototype = {
+  get fn() {
+    return this.parent.fn
+  },
+  get config() {
+    return this.parent.config
+  },
+  get time() {
+    return this.parent.time
+  },
+  get target() {
+    return this.index !== -1 ? this.parent.target[this.index] : this.parent.target
+  },
+  get value() {
+    return this.index !== -1 ? this.parent._value[this.index] : this.parent._value
+  },
+  set value(value) {
+    this.index !== -1 ? (this.parent._value[this.index] = value) : (this.parent._value = value)
+  },
 }
@@ -21,0 +29,0 @@

src/utils.js

@@ -31,8 +31,1 @@ // https://github.com/mattdesl/lerp
 }
-
-export function getset(self, key, getter, setter) {
-  const obj = {}
-  if (getter) obj.get = getter
-  if (setter) obj.set = setter
-  if (getter) Object.defineProperty(self, key, obj)
-}

No alert changes

Improved metrics

Lines of code

1175

increased by3.8%

Worsened metrics

Total package byte prevSize

36520

decreased by-1.03%

No dependency changes