@juggle/resize-observer - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

lib/DOMInteractions.d.ts

 declare type StandardCallback = () => any;
 export default class DOMInteractions {
     static watch(callback: StandardCallback): void;
-    static notify(): void;
 }
 export {};

lib/DOMInteractions.js

 const watchers = [];
-let frameId;
-let extraFrames = 0;
-const notify = () => {
-    cancelAnimationFrame(frameId);
-    frameId = requestAnimationFrame(() => {
-        if (dispatch()) {
-            extraFrames = 0;
-            notify();
-        }
-        else if (extraFrames < 60) {
-            extraFrames += 1;
-            notify();
-        }
-    });
-};
 const dispatch = () => {
@@ -24,21 +9,18 @@ watchers.forEach((watcher) => watcher());
     }
-    static notify() {
-        notify();
-    }
 }
-document.addEventListener('keyup', notify, true);
-document.addEventListener('keydown', notify, true);
-document.addEventListener('mouseup', notify, true);
-document.addEventListener('mousedown', notify, true);
-document.addEventListener('mouseover', notify, true);
-document.addEventListener('blur', notify, true);
-document.addEventListener('focus', notify, true);
-document.addEventListener('transitionend', notify, true);
-document.addEventListener('animationend', notify, true);
-document.addEventListener('animationstart', notify, true);
-document.addEventListener('animationiteration', notify, true);
-window.addEventListener('resize', notify);
+document.addEventListener('keyup', dispatch, true);
+document.addEventListener('keydown', dispatch, true);
+document.addEventListener('mouseup', dispatch, true);
+document.addEventListener('mousedown', dispatch, true);
+document.addEventListener('mouseover', dispatch, true);
+document.addEventListener('blur', dispatch, true);
+document.addEventListener('focus', dispatch, true);
+document.addEventListener('transitionend', dispatch, true);
+document.addEventListener('animationend', dispatch, true);
+document.addEventListener('animationstart', dispatch, true);
+document.addEventListener('animationiteration', dispatch, true);
+window.addEventListener('resize', dispatch);
 if ('MutationObserver' in window) {
     const observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
-    new MutationObserver(notify).observe(document.body, observerConfig);
+    new MutationObserver(dispatch).observe(document.body, observerConfig);
 }

lib/ResizeObserverController.js

@@ -41,3 +41,3 @@ import ResizeObservation from './ResizeObservation';
                 detail.observationTargets.push(new ResizeObservation(target));
-                DOMInteractions.notify();
+                notify();
             }
@@ -64,2 +64,17 @@ }
 }
+let frameId;
+let extraFrames = 0;
+const notify = () => {
+    cancelAnimationFrame(frameId);
+    frameId = requestAnimationFrame(() => {
+        if (dispatch()) {
+            extraFrames = 0;
+            notify();
+        }
+        else if (extraFrames < 60) {
+            extraFrames += 1;
+            notify();
+        }
+    });
+};
 const dispatch = () => {
@@ -81,2 +96,2 @@ let count = 0;
 };
-DOMInteractions.watch(dispatch);
+DOMInteractions.watch(notify);

package.json

 {
   "name": "@juggle/resize-observer",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "ResizeObserver - Based on the official draft specification",
@@ -5,0 +5,0 @@ "main": "./lib/ResizeObserver.js",

src/DOMInteractions.ts

 type StandardCallback = () => any;
 const watchers: StandardCallback[] = [];
 
-let frameId: number;
-let extraFrames = 0;
-const notify = () => {
-  cancelAnimationFrame(frameId);
-  frameId = requestAnimationFrame(() => {
-    if (dispatch()) {
-      extraFrames = 0;
-      notify();
-    }
-    else if (extraFrames < 60) {
-      extraFrames += 1;
-      notify();
-    }
-  });
-}
-
 const dispatch: StandardCallback = () => {
@@ -28,24 +12,21 @@ watchers.forEach((watcher: StandardCallback) => watcher());
   }
-  public static notify () {
-    notify();
-  }
 }
 
 // Listen to interaction
-document.addEventListener('keyup', notify, true);
-document.addEventListener('keydown', notify, true);
-document.addEventListener('mouseup', notify, true);
-document.addEventListener('mousedown', notify, true);
-document.addEventListener('mouseover', notify, true);
-document.addEventListener('blur', notify, true);
-document.addEventListener('focus', notify, true);
+document.addEventListener('keyup', dispatch, true);
+document.addEventListener('keydown', dispatch, true);
+document.addEventListener('mouseup', dispatch, true);
+document.addEventListener('mousedown', dispatch, true);
+document.addEventListener('mouseover', dispatch, true);
+document.addEventListener('blur', dispatch, true);
+document.addEventListener('focus', dispatch, true);
 
 // Listen to transitions and animations
-document.addEventListener('transitionend', notify, true);
-document.addEventListener('animationend', notify, true);
-document.addEventListener('animationstart', notify, true);
-document.addEventListener('animationiteration', notify, true);
+document.addEventListener('transitionend', dispatch, true);
+document.addEventListener('animationend', dispatch, true);
+document.addEventListener('animationstart', dispatch, true);
+document.addEventListener('animationiteration', dispatch, true);
 
 // Listen for window resize
-window.addEventListener('resize', notify);
+window.addEventListener('resize', dispatch);
 
@@ -55,3 +36,3 @@ // Listen for any other DOM changes which could affect sizes
   const observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
-  new MutationObserver(notify).observe(document.body, observerConfig);
+  new MutationObserver(dispatch).observe(document.body, observerConfig);
 }

src/ResizeObserverController.ts

@@ -51,3 +51,3 @@ import ResizeObserver from './ResizeObserver';
         detail.observationTargets.push(new ResizeObservation(target));
-        DOMInteractions.notify(); // Notify new observation
+        notify(); // Notify new observation
       }
@@ -75,2 +75,18 @@ }
 
+let frameId: number;
+let extraFrames = 0;
+const notify = () => {
+  cancelAnimationFrame(frameId);
+  frameId = requestAnimationFrame(() => {
+    if (dispatch()) {
+      extraFrames = 0;
+      notify();
+    }
+    else if (extraFrames < 60) {
+      extraFrames += 1;
+      notify();
+    }
+  });
+}
+
 const dispatch = () => {
@@ -93,2 +109,2 @@ let count = 0;
 
-DOMInteractions.watch(dispatch);
+DOMInteractions.watch(notify);

No alert changes

Worsened metrics

Total package byte prevSize

20503

decreased by-0.5%

Lines of code

466

decreased by-1.48%

No dependency changes