fix: nextTick timing regression (#1573)

* fix: nextTick timing regression (cherry picked from commit 65ecb6f)
marko-js · May 20, 2020 · 7f35078 · 7f35078
1 parent 61c954e
commit 7f35078
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 10 deletions.
diff --git a/packages/marko/src/core-tags/core/await/AsyncValue.js b/packages/marko/src/core-tags/core/await/AsyncValue.js
@@ -1,4 +1,4 @@
-var nextTick = require("../../../runtime/nextTick");
+var queueMicrotask = require("../../../runtime/queueMicrotask");
 
 function AsyncValue() {
   /**
@@ -94,10 +94,10 @@ AsyncValue.prototype = {
 
       var finalPromise = value.then(
         function onFulfilled(value) {
-          nextTick(asyncValue.___resolve.bind(asyncValue, value));
+          queueMicrotask(asyncValue.___resolve.bind(asyncValue, value));
         },
         function onRejected(err) {
-          nextTick(asyncValue.___reject.bind(asyncValue, err));
+          queueMicrotask(asyncValue.___reject.bind(asyncValue, err));
         }
       );
 

diff --git a/packages/marko/src/runtime/components/update-manager.js b/packages/marko/src/runtime/components/update-manager.js
@@ -4,7 +4,7 @@ var updatesScheduled = false;
 var batchStack = []; // A stack of batched updates
 var unbatchedQueue = []; // Used for scheduled batched updates
 
-var nextTick = require("../nextTick");
+var setImmediate = require("../setImmediate");
 
 /**
  * This function is called when we schedule the update of "unbatched"
@@ -26,13 +26,13 @@ function updateUnbatchedComponents() {
 function scheduleUpdates() {
   if (updatesScheduled) {
     // We have already scheduled a batched update for the
-    // process.nextTick so nothing to do
+    // nextTick so nothing to do
     return;
   }
 
   updatesScheduled = true;
 
-  nextTick(updateUnbatchedComponents);
+  setImmediate(updateUnbatchedComponents);
 }
 
 function updateComponents(queue) {
@@ -96,7 +96,7 @@ function queueComponentUpdate(component) {
     }
   } else {
     // We are not within a batched update. We need to schedule a batch update
-    // for the process.nextTick (if that hasn't been done already) and we will
+    // for the nextTick (if that hasn't been done already) and we will
     // add the component to the unbatched queued
     scheduleUpdates();
     unbatchedQueue.push(component);

diff --git a/packages/marko/src/runtime/nextTick.js → packages/marko/src/runtime/queueMicrotask.js b/packages/marko/src/runtime/nextTick.js → packages/marko/src/runtime/queueMicrotask.js
@@ -7,7 +7,6 @@ module.exports =
         promise.then(cb).catch(rethrow);
       }
     : setTimeout;
-
 function rethrow(err) {
   setTimeout(function() {
     throw err;

diff --git a/packages/marko/src/runtime/renderable.js b/packages/marko/src/runtime/renderable.js
@@ -1,5 +1,5 @@
 var defaultCreateOut = require("./createOut");
-var nextTick = require("./nextTick");
+var setImmediate = require("./setImmediate");
 var extend = require("raptor-util/extend");
 
 function safeRender(renderFunc, finalData, finalOut, shouldEnd) {
@@ -13,7 +13,7 @@ function safeRender(renderFunc, finalData, finalOut, shouldEnd) {
     var actualEnd = finalOut.end;
     finalOut.end = function() {};
 
-    nextTick(function() {
+    setImmediate(function() {
       finalOut.end = actualEnd;
       finalOut.error(err);
     });

diff --git a/packages/marko/src/runtime/setImmediate.js b/packages/marko/src/runtime/setImmediate.js
@@ -0,0 +1,22 @@
+module.exports =
+  typeof setImmediate === "function"
+    ? setImmediate
+    : (function() {
+        var queue = [];
+        var win = window;
+        var msg = "" + Math.random();
+        win.addEventListener("message", function(ev) {
+          if (ev.data === msg) {
+            var callbacks = queue;
+            queue = [];
+            for (var i = 0; i < callbacks.length; i++) {
+              callbacks[i]();
+            }
+          }
+        });
+        return function(callback) {
+          if (queue.push(callback) === 1) {
+            win.postMessage(msg, "*");
+          }
+        };
+      })();