hydro-js - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/library.js

@@ -27,3 +27,2 @@ // Safari Polyfills
 let insertBeforeDiffing = false;
-let isRendering = false; // Helper - changes per requestAnimationFrame(render or update) - https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API
 let isScheduling = false; // Helper - checks if code is already in requestIdleCallback
@@ -539,3 +538,2 @@ const reactivityRegex = /\{\{((\s|.)*?)\}\}/;
     });
-    isRendering = false;
     return unmount(isDocumentFragment(elem) ? elemChildren : elem);
@@ -662,13 +660,8 @@ }
     isScheduling = true;
-    while (deadline.timeRemaining() > 0 && toSchedule.length) {
-        if (!isRendering) {
-            // isRendering - don't paint the frame if the last one did not finish
-            isRendering = true;
-            requestAnimationFrame(() => {
-                const [fn, ...args] = toSchedule.shift();
-                fn(...args);
-            });
-        }
+    while (deadline.timeRemaining() > 0 && toSchedule.length > 0) {
+        const [fn, ...args] = toSchedule.shift();
+        fn(...args);
     }
-    if (toSchedule.length) {
+    /* c8 ignore next 3 */
+    if (toSchedule.length > 0) {
         window.requestIdleCallback(schedule);
@@ -1114,3 +1107,2 @@ }
     });
-    isRendering = false;
 }
@@ -1122,9 +1114,20 @@ const hydro = generateProxy();
 document.addEventListener("visibilitychange", () => {
-    /* c8 ignore next 9 */
-    // The schedule logic does not work well when the document is in the background. In this case, all the changes have to be rendered at once, if the User comes back
+    /* c8 ignore next 19 */
+    // The schedule logic does not work well when the document is in the background. Ideally all the changes have to be rendered at once, if the User comes back
+    // This could block the UI however, and it makes sense to only render the last updates < 50ms
     if (wasHidden === true && document.hidden === false) {
-        while (toSchedule.length) {
-            const [fn, ...args] = toSchedule.shift();
-            requestAnimationFrame(() => fn(...args));
+        const start = performance.now();
+        // 1 frame if 24fps, 18 frames if 360fps
+        const lastFrames = toSchedule.splice(toSchedule.length - 18, 18);
+        while (lastFrames.length > 0 && performance.now() < start + 50) {
+            const [fn, ...args] = lastFrames.shift();
+            fn(...args);
         }
+        // Render the latest update, just in case
+        if (lastFrames.length > 0) {
+            const [fn, ...args] = lastFrames.pop();
+            fn(...args);
+        }
+        // Empty toSchedule
+        toSchedule.splice(0, toSchedule.length);
     }
@@ -1131,0 +1134,0 @@ wasHidden = document.hidden;

package.json

 {
   "name": "hydro-js",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A lightweight reactive library",
@@ -5,0 +5,0 @@ "type": "module",

src/library.ts

@@ -106,4 +106,2 @@ declare const window: any;
 let insertBeforeDiffing = false;
-
-let isRendering = false; // Helper - changes per requestAnimationFrame(render or update) - https://developer.mozilla.org/en-US/docs/Web/API/Background_Tasks_API
 let isScheduling = false; // Helper - checks if code is already in requestIdleCallback
@@ -733,3 +731,2 @@
 
-  isRendering = false;
   return unmount(isDocumentFragment(elem) ? elemChildren! : elem);
@@ -897,14 +894,9 @@ }
 
-  while (deadline.timeRemaining() > 0 && toSchedule.length) {
-    if (!isRendering) {
-      // isRendering - don't paint the frame if the last one did not finish
-      isRendering = true;
-      requestAnimationFrame(() => {
-        const [fn, ...args] = toSchedule.shift()!;
-        fn(...args);
-      });
-    }
+  while (deadline.timeRemaining() > 0 && toSchedule.length > 0) {
+    const [fn, ...args] = toSchedule.shift()!;
+    fn(...args);
   }
 
-  if (toSchedule.length) {
+  /* c8 ignore next 3 */
+  if (toSchedule.length > 0) {
     window.requestIdleCallback(schedule);
@@ -1423,4 +1415,2 @@ }
   });
-
-  isRendering = false;
 }
@@ -1434,9 +1424,20 @@
 document.addEventListener("visibilitychange", () => {
-  /* c8 ignore next 9 */
-  // The schedule logic does not work well when the document is in the background. In this case, all the changes have to be rendered at once, if the User comes back
+  /* c8 ignore next 19 */
+  // The schedule logic does not work well when the document is in the background. Ideally all the changes have to be rendered at once, if the User comes back
+  // This could block the UI however, and it makes sense to only render the last updates < 50ms
   if (wasHidden === true && document.hidden === false) {
-    while (toSchedule.length) {
-      const [fn, ...args] = toSchedule.shift()!;
-      requestAnimationFrame(() => fn(...args));
+    const start = performance.now();
+    // 1 frame if 24fps, 18 frames if 360fps
+    const lastFrames = toSchedule.splice(toSchedule.length - 18, 18);
+    while (lastFrames.length > 0 && performance.now() < start + 50) {
+      const [fn, ...args] = lastFrames.shift()!;
+      fn(...args);
     }
+    // Render the latest update, just in case
+    if (lastFrames.length > 0) {
+      const [fn, ...args] = lastFrames.pop()!;
+      fn(...args);
+    }
+    // Empty toSchedule
+    toSchedule.splice(0, toSchedule.length);
   }
@@ -1443,0 +1444,0 @@ wasHidden = document.hidden;

No alert changes

Improved metrics

Total package byte prevSize

269671

increased by20.79%

Number of package files

12

increased by20%

Lines of code

5329

increased by27.21%

No dependency changes