@animini/core - npm Package Compare versions

Comparing version 0.2.6 to 0.3.0

CHANGELOG.md

 # @animini/core
 
+## 0.3.0
+
+### Minor Changes
+
+- 2d867a9: Package refactor, introducing vanilla api
+
 ## 0.2.6
@@ -4,0 +10,0 @@

dist/animini-core.cjs.dev.js

@@ -7,2 +7,36 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 function _defineProperty(obj, key, value) {
@@ -390,16 +424,34 @@ if (key in obj) {
 
-function buildAnimate(target) {
-  return function animate(element, masterConfig) {
+const _excluded = ["el"];
+const elementAnimationsMap = new Map();
+function buildAnimate(buildTarget) {
+  return function animate(masterConfigWithEl, globalTo) {
+    var _target$getElement;
+
+    const target = buildTarget;
     const loop = target.loop || GlobalLoop;
-    const el = typeof element === 'object' && 'current' in element ? element : {
-      current: element
-    };
-    const currentValues = {};
-    const animations = new Map();
+    const initial = {};
     let resolveRef;
     let rejectRef;
 
+    const {
+      el: element
+    } = masterConfigWithEl,
+          masterConfig = _objectWithoutProperties(masterConfigWithEl, _excluded);
+
+    const tElement = ((_target$getElement = target.getElement) === null || _target$getElement === void 0 ? void 0 : _target$getElement.call(target, element)) || element;
+    const el = typeof tElement === 'object' && 'current' in tElement ? tElement : {
+      current: tElement
+    };
+    let animations = elementAnimationsMap.get(element);
+
+    if (!animations) {
+      animations = new Map();
+      elementAnimationsMap.set(element, animations);
+    }
+
     const update = () => {
       var _target$setValues;
 
+      const currentValues = {};
       if (!el.current) return;
@@ -412,3 +464,3 @@ let idle = true;
       });
-      (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, currentValues, el.current);
+      (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, currentValues, el.current, initial, idle);
 
@@ -431,3 +483,3 @@ if (idle) {
           if (!animated) {
-            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key);
+            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, initial);
             animated = new Animated({
@@ -460,6 +512,12 @@ value,
       (_resolveRef = resolveRef) === null || _resolveRef === void 0 ? void 0 : _resolveRef();
+      elementAnimationsMap.delete(element);
     };
 
-    const get = key => currentValues[key];
+    const get = key => {
+      var _animations$get;
 
+      return (_animations$get = animations.get(key)) === null || _animations$get === void 0 ? void 0 : _animations$get.value;
+    };
+
+    if (globalTo) start(globalTo);
     const api = {
@@ -466,0 +524,0 @@ get,

dist/animini-core.cjs.prod.js

@@ -7,2 +7,36 @@ 'use strict';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 function _defineProperty(obj, key, value) {
@@ -390,16 +424,34 @@ if (key in obj) {
 
-function buildAnimate(target) {
-  return function animate(element, masterConfig) {
+const _excluded = ["el"];
+const elementAnimationsMap = new Map();
+function buildAnimate(buildTarget) {
+  return function animate(masterConfigWithEl, globalTo) {
+    var _target$getElement;
+
+    const target = buildTarget;
     const loop = target.loop || GlobalLoop;
-    const el = typeof element === 'object' && 'current' in element ? element : {
-      current: element
-    };
-    const currentValues = {};
-    const animations = new Map();
+    const initial = {};
     let resolveRef;
     let rejectRef;
 
+    const {
+      el: element
+    } = masterConfigWithEl,
+          masterConfig = _objectWithoutProperties(masterConfigWithEl, _excluded);
+
+    const tElement = ((_target$getElement = target.getElement) === null || _target$getElement === void 0 ? void 0 : _target$getElement.call(target, element)) || element;
+    const el = typeof tElement === 'object' && 'current' in tElement ? tElement : {
+      current: tElement
+    };
+    let animations = elementAnimationsMap.get(element);
+
+    if (!animations) {
+      animations = new Map();
+      elementAnimationsMap.set(element, animations);
+    }
+
     const update = () => {
       var _target$setValues;
 
+      const currentValues = {};
       if (!el.current) return;
@@ -412,3 +464,3 @@ let idle = true;
       });
-      (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, currentValues, el.current);
+      (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, currentValues, el.current, initial, idle);
 
@@ -431,3 +483,3 @@ if (idle) {
           if (!animated) {
-            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key);
+            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, initial);
             animated = new Animated({
@@ -460,6 +512,12 @@ value,
       (_resolveRef = resolveRef) === null || _resolveRef === void 0 ? void 0 : _resolveRef();
+      elementAnimationsMap.delete(element);
     };
 
-    const get = key => currentValues[key];
+    const get = key => {
+      var _animations$get;
 
+      return (_animations$get = animations.get(key)) === null || _animations$get === void 0 ? void 0 : _animations$get.value;
+    };
+
+    if (globalTo) start(globalTo);
     const api = {
@@ -466,0 +524,0 @@ get,

dist/animini-core.esm.js

 import { c as clamp, l as lerp } from './lerp-839ad04d.esm.js';
 export { c as clamp, a as lerp, r as rubberbandIfOutOfBounds } from './lerp-839ad04d.esm.js';
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 function _defineProperty(obj, key, value) {
@@ -386,16 +420,34 @@ if (key in obj) {
 
-function buildAnimate(target) {
-  return function animate(element, masterConfig) {
+const _excluded = ["el"];
+const elementAnimationsMap = new Map();
+function buildAnimate(buildTarget) {
+  return function animate(masterConfigWithEl, globalTo) {
+    var _target$getElement;
+
+    const target = buildTarget;
     const loop = target.loop || GlobalLoop;
-    const el = typeof element === 'object' && 'current' in element ? element : {
-      current: element
-    };
-    const currentValues = {};
-    const animations = new Map();
+    const initial = {};
     let resolveRef;
     let rejectRef;
 
+    const {
+      el: element
+    } = masterConfigWithEl,
+          masterConfig = _objectWithoutProperties(masterConfigWithEl, _excluded);
+
+    const tElement = ((_target$getElement = target.getElement) === null || _target$getElement === void 0 ? void 0 : _target$getElement.call(target, element)) || element;
+    const el = typeof tElement === 'object' && 'current' in tElement ? tElement : {
+      current: tElement
+    };
+    let animations = elementAnimationsMap.get(element);
+
+    if (!animations) {
+      animations = new Map();
+      elementAnimationsMap.set(element, animations);
+    }
+
     const update = () => {
       var _target$setValues;
 
+      const currentValues = {};
       if (!el.current) return;
@@ -408,3 +460,3 @@ let idle = true;
       });
-      (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, currentValues, el.current);
+      (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, currentValues, el.current, initial, idle);
 
@@ -427,3 +479,3 @@ if (idle) {
           if (!animated) {
-            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key);
+            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, initial);
             animated = new Animated({
@@ -456,6 +508,12 @@ value,
       (_resolveRef = resolveRef) === null || _resolveRef === void 0 ? void 0 : _resolveRef();
+      elementAnimationsMap.delete(element);
     };
 
-    const get = key => currentValues[key];
+    const get = key => {
+      var _animations$get;
 
+      return (_animations$get = animations.get(key)) === null || _animations$get === void 0 ? void 0 : _animations$get.value;
+    };
+
+    if (globalTo) start(globalTo);
     const api = {
@@ -462,0 +520,0 @@ get,

dist/declarations/src/buildAnimate.d.ts

@@ -1,9 +0,10 @@
-import { Config, Payload, Target } from './types';
-export declare function buildAnimate<ElementType, ValueType extends Payload>(target: Target<ElementType, ValueType>): (element: ElementType | {
-    current: ElementType;
-}, masterConfig?: Config) => {
-    get: (key: keyof ValueType) => any;
-    start: (to: Partial<ValueType>, config?: Config | undefined) => Promise<unknown>;
+import { ConfigWithEl, Payload, Target } from './types';
+export declare function buildAnimate<ElementType, BuildValues extends Payload>(buildTarget: Target<ElementType, BuildValues>): <AnimateElementType extends ElementType, Values extends BuildValues = BuildValues>(masterConfigWithEl: ConfigWithEl<AnimateElementType>, globalTo?: Partial<Values> | undefined) => {
+    get: (key: keyof Values) => any;
+    start: (to: Partial<Values>, config?: {
+        immediate?: boolean | undefined;
+        easing?: import("./types").Algorithm | undefined;
+    } | {}) => Promise<unknown>;
     stop: () => void;
     clean: () => void;
 };

dist/declarations/src/index.d.ts

@@ -1,4 +0,4 @@
-export { buildAnimate } from './buildAnimate';
+export * from './buildAnimate';
 export * from './utils';
 export * from './FrameLoop';
 export * from './types';

dist/declarations/src/types.d.ts

@@ -24,6 +24,7 @@ import { Animated } from './animated/Animated';
 export declare type Payload = Record<string, any>;
-export declare type Target<ElementType, ValueType extends Payload> = {
+export declare type Target<ElementType, Values extends Payload> = {
+    getElement?(element: any): ElementType;
     loop?: FrameLoop;
-    setValues?(rawValues: ValueType, element: ElementType): void;
-    getInitialValueAndAdapter<K extends keyof ValueType>(element: ElementType, key: K): [ValueType[K], Adapter<ElementType> | undefined];
+    setValues?(rawValues: Values, element: ElementType, initial?: any, idle?: boolean): void;
+    getInitialValueAndAdapter<K extends keyof Values>(element: ElementType, key: K, initial?: any): [Values[K], Adapter<ElementType> | undefined];
 };
@@ -34,2 +35,17 @@ export declare type ConfigValue = {
 };
+export declare type ElementRef<ElementType> = {
+    current: ElementType;
+};
 export declare type Config = ConfigValue | ((key: string) => ConfigValue);
+export declare type ConfigWithEl<ElementType> = Config & {
+    el: ElementType | ElementRef<ElementType>;
+};
+export declare type ConfigWithOptionalEl<ElementType> = Config & {
+    el?: ElementType;
+};
+export declare type ApiType<Values> = {
+    get: (key: keyof Values) => any;
+    start: (to: Partial<Values>, config?: Config) => Promise<unknown>;
+    stop: () => void;
+    clean: () => void;
+};

package.json

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

src/buildAnimate.ts

 import { Animated } from './animated/Animated'
 import { GlobalLoop } from './FrameLoop'
-import { Config, Payload, Target } from './types'
+import { ConfigWithEl, Payload, Target } from './types'
 
-// TODO chaining (hard)
+// TODO timeline (hard)
 // TODO from (easy)
@@ -10,13 +10,32 @@ // TODO staggering (hard)
 // TODO scroll (medium)
+// TODO delay (medium)
 
-export function buildAnimate<ElementType, ValueType extends Payload>(target: Target<ElementType, ValueType>) {
-  return function animate(element: ElementType | { current: ElementType }, masterConfig?: Config) {
+type AnimationMap<ElementType, Values> = Map<keyof Values, Animated<ElementType>>
+const elementAnimationsMap = new Map<any, any>()
+
+export function buildAnimate<ElementType, BuildValues extends Payload>(buildTarget: Target<ElementType, BuildValues>) {
+  return function animate<AnimateElementType extends ElementType, Values extends BuildValues = BuildValues>(
+    masterConfigWithEl: ConfigWithEl<AnimateElementType>,
+    globalTo?: Partial<Values>
+  ) {
+    const target = buildTarget as Target<AnimateElementType, Values>
     const loop = target.loop || GlobalLoop
-    const el = typeof element === 'object' && 'current' in element ? element : { current: element }
-    const currentValues: any = {}
-    const animations = new Map<keyof ValueType, Animated<ElementType>>()
+    const initial = {}
+
     let resolveRef: (value?: unknown) => void
     let rejectRef: (value?: unknown) => void
 
+    const { el: element, ...masterConfig } = masterConfigWithEl
+
+    const tElement = target.getElement?.(element) || element
+    const el = typeof tElement === 'object' && 'current' in tElement ? tElement : { current: tElement }
+
+    let animations: AnimationMap<AnimateElementType, Values> = elementAnimationsMap.get(element)
+    if (!animations) {
+      animations = new Map()
+      elementAnimationsMap.set(element, animations)
+    }
+
     const update = () => {
+      const currentValues: any = {}
       if (!el.current) return
@@ -30,3 +49,3 @@
       })
-      target.setValues?.(currentValues, el.current)
+      target.setValues?.(currentValues, el.current, initial, idle)
       if (idle) {
@@ -36,6 +55,5 @@ loop.stop(update)
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }
 
-    const start = (to: Partial<ValueType>, config = masterConfig) => {
+    const start = (to: Partial<Values>, config = masterConfig) => {
       return new Promise((resolve, reject) => {
@@ -49,3 +67,3 @@ resolveRef = resolve
           if (!animated) {
-            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key)
+            const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, initial)
             animated = new Animated({ value, adapter, key, el: el.current }, loop)
@@ -71,6 +89,12 @@ animations.set(key, animated)
       resolveRef?.()
+      elementAnimationsMap.delete(element)
     }
 
-    const get = (key: keyof ValueType) => currentValues[key]
+    const get = (key: keyof Values) => animations.get(key)?.value
 
+    // TODO discuss this 👇
+    // when `to` is passed to the function then promise-based functionality
+    // wouldn't work.
+    if (globalTo) start(globalTo)
+
     const api = { get, start, stop, clean }
@@ -77,0 +101,0 @@ return api

src/index.ts

@@ -1,4 +0,4 @@
-export { buildAnimate } from './buildAnimate'
+export * from './buildAnimate'
 export * from './utils'
 export * from './FrameLoop'
 export * from './types'

src/types.ts

@@ -31,9 +31,11 @@ import { Animated } from './animated/Animated'
 
-export type Target<ElementType, ValueType extends Payload> = {
+export type Target<ElementType, Values extends Payload> = {
+  getElement?(element: any): ElementType
   loop?: FrameLoop
-  setValues?(rawValues: ValueType, element: ElementType): void
-  getInitialValueAndAdapter<K extends keyof ValueType>(
+  setValues?(rawValues: Values, element: ElementType, initial?: any, idle?: boolean): void
+  getInitialValueAndAdapter<K extends keyof Values>(
     element: ElementType,
-    key: K
-  ): [ValueType[K], Adapter<ElementType> | undefined]
+    key: K,
+    initial?: any
+  ): [Values[K], Adapter<ElementType> | undefined]
 }
@@ -46,2 +48,12 @@
 
+export type ElementRef<ElementType> = { current: ElementType }
 export type Config = ConfigValue | ((key: string) => ConfigValue)
+export type ConfigWithEl<ElementType> = Config & { el: ElementType | ElementRef<ElementType> }
+export type ConfigWithOptionalEl<ElementType> = Config & { el?: ElementType }
+
+export type ApiType<Values> = {
+  get: (key: keyof Values) => any
+  start: (to: Partial<Values>, config?: Config) => Promise<unknown>
+  stop: () => void
+  clean: () => void
+}

No alert changes

Improved metrics

Total package byte prevSize

86484

increased by9.27%

Lines of code

2685

increased by7.4%

No dependency changes