crossani - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/bundle.js

@@ -31,4 +31,10 @@ (() => {
   function cloneStyles(styles) {
-    const entries = Object.entries(styles).filter(([k]) => !Object.is(parseInt(k), NaN)).map(([, p]) => [p, styles[p]]);
-    return Object.fromEntries(entries);
+    const cloned = {};
+    for (const k in styles) {
+      if (Object.is(parseInt(k), NaN))
+        break;
+      const p = styles[k];
+      cloned[p] = styles[p];
+    }
+    return cloned;
   }
@@ -80,19 +86,2 @@ function getOrInitStore(elem) {
   }
-  var eventOrTimeout = (elem, resolve, timeout) => void setTimeout(() => {
-    let cancel = false;
-    const handler = () => {
-      if (cancel)
-        return;
-      resolve();
-      cancel = true;
-    };
-    elem.addEventListener("transitionend", handler, { once: true });
-    setTimeout(() => {
-      if (cancel)
-        return;
-      cancel = true;
-      elem.removeEventListener("transitionend", handler);
-      resolve();
-    }, timeout);
-  });
   var whenTransitionAborts = (elem, callback) => {
@@ -103,2 +92,18 @@ const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? callback : animateOnceStopped);
 
+  // src/queue.ts
+  var queues = {};
+  function enqueue(task, ms) {
+    const key = performance.now() + ms >> 2;
+    if (queues[key])
+      queues[key].push(task);
+    else {
+      queues[key] = [task];
+      setTimeout(() => {
+        for (const task2 of queues[key])
+          task2();
+        delete queues[key];
+      }, ms);
+    }
+  }
+
   // src/animator.ts
@@ -137,7 +142,7 @@ function popFirst(elem) {
     updateStyles(elem);
-    eventOrTimeout(elem, () => {
+    enqueue(() => {
       state.queue.shift();
       state.transitionPromises.shift()?.[2]();
       startAnimating(elem);
-    }, state.lastMs + 20);
+    }, state.lastMs);
   }
@@ -144,0 +149,0 @@

dist/cjs/animator.js

@@ -27,2 +27,3 @@ var __defProp = Object.defineProperty;
 var import_util = require("./util");
+var import_queue = require("./queue");
 function popFirst(elem) {
@@ -60,7 +61,7 @@ const state = (0, import_util.getOrInitStore)(elem);
   (0, import_util.updateStyles)(elem);
-  (0, import_util.eventOrTimeout)(elem, () => {
+  (0, import_queue.enqueue)(() => {
     state.queue.shift();
     state.transitionPromises.shift()?.[2]();
     startAnimating(elem);
-  }, state.lastMs + 20);
+  }, state.lastMs);
 }

dist/cjs/index.js

@@ -22,3 +22,2 @@ var __defProp = Object.defineProperty;
   JUMP: () => import_generator.JUMP,
-  Transition: () => import_types.Transition,
   unload: () => unload
@@ -31,3 +30,2 @@ });
 var import_generator = require("./generator");
-var import_types = require("./types");
 SVGElement.prototype.doTransition = HTMLElement.prototype.doTransition = function(transOrName) {
@@ -34,0 +32,0 @@ (0, import_util.sanitiseTransitions)(this);

dist/cjs/util.js

@@ -21,3 +21,2 @@ var __defProp = Object.defineProperty;
   cloneStyles: () => cloneStyles,
-  eventOrTimeout: () => eventOrTimeout,
   getOrInitStore: () => getOrInitStore,
@@ -33,4 +32,10 @@ queueTransition: () => queueTransition,
 function cloneStyles(styles) {
-  const entries = Object.entries(styles).filter(([k]) => !Object.is(parseInt(k), NaN)).map(([, p]) => [p, styles[p]]);
-  return Object.fromEntries(entries);
+  const cloned = {};
+  for (const k in styles) {
+    if (Object.is(parseInt(k), NaN))
+      break;
+    const p = styles[k];
+    cloned[p] = styles[p];
+  }
+  return cloned;
 }
@@ -82,19 +87,2 @@ function getOrInitStore(elem) {
 }
-const eventOrTimeout = (elem, resolve, timeout) => void setTimeout(() => {
-  let cancel = false;
-  const handler = () => {
-    if (cancel)
-      return;
-    resolve();
-    cancel = true;
-  };
-  elem.addEventListener("transitionend", handler, { once: true });
-  setTimeout(() => {
-    if (cancel)
-      return;
-    cancel = true;
-    elem.removeEventListener("transitionend", handler);
-    resolve();
-  }, timeout);
-});
 const whenTransitionAborts = (elem, callback) => {
@@ -101,0 +89,0 @@ const animateOnceStopped = () => requestAnimationFrame(elem.style.transitionProperty === "none" ? callback : animateOnceStopped);

dist/esm/animator.js

 import { generateTransition } from "./generator";
-import { eventOrTimeout, getOrInitStore, updateStyles } from "./util";
+import { getOrInitStore, updateStyles } from "./util";
+import { enqueue } from "./queue";
 /** Pops the first transition off the queue instantly */
@@ -42,10 +43,7 @@ function popFirst(elem) {
     updateStyles(elem);
-    // listen for finish
-    eventOrTimeout(elem, () => {
+    enqueue(() => {
         state.queue.shift();
         state.transitionPromises.shift()?.[2]();
         startAnimating(elem);
-    }, 
-    // give the transition 20ms of room to end early
-    state.lastMs + 20);
+    }, state.lastMs);
 }

dist/esm/util.js

@@ -6,7 +6,12 @@ import { EASE } from "./generator";
     // CSSStyleDeclaration is actually an array of props!
-    // on blink, there is also the props as keys, so we filter these out
-    const entries = Object.entries(styles)
-        .filter(([k]) => !Object.is(parseInt(k), NaN)) // comparing NaN is never true moment
-        .map(([, p]) => [p, styles[p]]);
-    return Object.fromEntries(entries);
+    // there is also the props as keys, so we stop on these
+    const cloned = {};
+    for (const k in styles) {
+        if (Object.is(parseInt(k), NaN))
+            break;
+        const p = styles[k];
+        // @ts-expect-error ffs
+        cloned[p] = styles[p];
+    }
+    return cloned;
 }
@@ -63,20 +68,2 @@ /** Gets a store or inits if needed */
 }
-/** listens for transitionend, but with a timeout */
-export const eventOrTimeout = (elem, resolve, timeout) => void setTimeout(() => {
-    let cancel = false;
-    const handler = () => {
-        if (cancel)
-            return;
-        resolve();
-        cancel = true;
-    };
-    elem.addEventListener("transitionend", handler, { once: true });
-    setTimeout(() => {
-        if (cancel)
-            return;
-        cancel = true;
-        elem.removeEventListener("transitionend", handler);
-        resolve();
-    }, timeout);
-});
 /** Waits for an element to finish transitioning before running callback, always run abortAnimation first */
@@ -83,0 +70,0 @@ export const whenTransitionAborts = (elem, callback) => {

dist/types/index.d.ts

 export { EASE, JUMP } from "./generator";
 export declare const unload: () => void;
-export { Transition } from "./types";
+export type { Transition } from "./types";

dist/types/util.d.ts

 import { ElementState, Transition } from "./types";
 /** Converts a CSSStyleDeclaration to a Record<string, string> */
-export declare function cloneStyles(styles: CSSStyleDeclaration): any;
+export declare function cloneStyles(styles: CSSStyleDeclaration): Record<string, string>;
 /** Gets a store or inits if needed */
@@ -12,5 +12,3 @@ export declare function getOrInitStore(elem: HTMLElement | SVGElement): ElementState;
 export declare function sanitiseTransitions(elem: HTMLElement | SVGElement): void;
-/** listens for transitionend, but with a timeout */
-export declare const eventOrTimeout: (elem: HTMLElement | SVGElement, resolve: () => void, timeout: number) => undefined;
 /** Waits for an element to finish transitioning before running callback, always run abortAnimation first */
 export declare const whenTransitionAborts: (elem: HTMLElement | SVGElement, callback: () => void) => void;

package.json

 {
   "name": "crossani",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A silky smooth declarative animation library for the web.",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

41340

decreased by-3.64%

Lines of code

833

decreased by-2.46%

No dependency changes