crossani - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/cjs/queue.js

+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var queue_exports = {};
+__export(queue_exports, {
+  enqueue: () => enqueue
+});
+module.exports = __toCommonJS(queue_exports);
+const 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);
+  }
+}

dist/esm/queue.js

+const queues = {};
+// we batch queued events in a range of 4ms (2 right shifts = div by 4 and floor)
+export function enqueue(task, ms) {
+    const key = (performance.now() + ms) >> 2;
+    if (queues[key])
+        queues[key].push(task);
+    else {
+        queues[key] = [task];
+        setTimeout(() => {
+            for (const task of queues[key])
+                task();
+            delete queues[key];
+        }, ms);
+    }
+}

dist/types/queue.d.ts

+export declare function enqueue(task: () => void, ms: number): void;

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",

dist/cjs/remove.js

-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var remove_exports = {};
-__export(remove_exports, {
-  default: () => remove_default
-});
-module.exports = __toCommonJS(remove_exports);
-var import_animator = require("./animator");
-var import_shared = require("./shared");
-var import_util = require("./util");
-var remove_default = () => SVGElement.prototype.removeCrossAni = HTMLElement.prototype.removeCrossAni = function() {
-  const store = (0, import_util.getOrInitStore)(this);
-  (0, import_animator.popAll)(this);
-  store.curr = {};
-  this.style.transition = "";
-  (0, import_util.updateStyles)(this);
-  import_shared.stateStore.delete(this);
-};

dist/esm/remove.js

-import { popAll } from "./animator";
-import { stateStore } from "./shared";
-import { getOrInitStore, updateStyles } from "./util";
-export default () => (SVGElement.prototype.removeCrossAni = HTMLElement.prototype.removeCrossAni =
-    function () {
-        const store = getOrInitStore(this);
-        popAll(this);
-        store.curr = {};
-        this.style.transition = "";
-        updateStyles(this);
-        stateStore.delete(this);
-    });

dist/types/remove.d.ts

-declare const _default: () => () => void;
-export default _default;

No alert changes

Worsened metrics

Total package byte prevSize

41340

-3.64%

Lines of code

833

-2.46%

No dependency changes