Merge pull request #362 from rwjblue/use-promises-first

Use Promise microtask queue as first option.

Author: rwjblue

lib/backburner/platform.ts

@@ -9,29 +9,41 @@ export interface IPlatform {
 const SET_TIMEOUT = setTimeout;
 const NOOP = () => {};
 
-export function buildPlatform(flush: () => void): IPlatform {
-  let next;
-  let clearNext = NOOP;
+export function buildNext(flush: () => void): () => void {
+  // Using "promises first" here to:
+  //
+  // 1) Ensure more consistent experience on browsers that
+  //    have differently queued microtasks (separate queues for
+  //    MutationObserver vs Promises).
+  // 2) Ensure better debugging experiences (it shows up in Chrome
+  //    call stack as "Promise.then (async)") which is more consistent
+  //    with user expectations
+  //
+  // When Promise is unavailable use MutationObserver (mostly so that we
+  // still get microtasks on IE11), and when neither MutationObserver and
+  // Promise are present use a plain old setTimeout.
+  if (typeof Promise === 'function') {
+    const autorunPromise = Promise.resolve();
 
-  if (typeof MutationObserver === 'function') {
+    return () => autorunPromise.then(flush);
+  } else if (typeof MutationObserver === 'function') {
     let iterations = 0;
     let observer = new MutationObserver(flush);
     let node = document.createTextNode('');
     observer.observe(node, { characterData: true });
 
-    next = () => {
+    return () => {
       iterations = ++iterations % 2;
       node.data = '' + iterations;
       return iterations;
     };
-
-  } else if (typeof Promise === 'function') {
-    const autorunPromise = Promise.resolve();
-    next = () => autorunPromise.then(flush);
-
   } else {
-    next = () => SET_TIMEOUT(flush, 0);
+    return () => SET_TIMEOUT(flush, 0);
   }
+}
+
+export function buildPlatform(flush: () => void): IPlatform {
+  let clearNext = NOOP;
 
   return {
     setTimeout(fn, ms) {
@@ -46,7 +58,7 @@ export function buildPlatform(flush: () => void): IPlatform {
       return Date.now();
     },
 
-    next,
+    next: buildNext(flush),
     clearNext,
   };
 }

lib/index.ts

@@ -4,6 +4,7 @@ export {
 } from './backburner/platform';
 
 import {
+  buildNext,
   buildPlatform,
   IPlatform,
 } from './backburner/platform';
@@ -153,6 +154,8 @@ export interface IBackburnerOptions {
 
 export default class Backburner {
   public static Queue = Queue;
+  public static buildPlatform = buildPlatform;
+  public static buildNext = buildNext;
 
   public DEBUG = false;
 

tests/build-next-test.ts

@@ -0,0 +1,26 @@
+import Backburner from 'backburner';
+
+QUnit.module('tests/build-next', function() {
+
+  QUnit.test('can build custom flushing next', function(assert) {
+    let done = assert.async();
+    let next = Backburner.buildNext(() => assert.step('custom next'));
+
+    assert.step('start');
+    Promise.resolve().then(() => assert.step('first promise resolved'));
+    next();
+    Promise.resolve().then(() => assert.step('second promise resolved'));
+    assert.step('end');
+
+    setTimeout(() => {
+      assert.verifySteps([
+        'start',
+        'end',
+        'first promise resolved',
+        'custom next',
+        'second promise resolved',
+      ]);
+      done();
+    }, 10);
+  });
+});

tests/index.ts

@@ -1,5 +1,6 @@
 import './autorun-test';
 import './bb-has-timers-test';
+import './build-next-test';
 import './cancel-test';
 import './configurable-timeout-test';
 import './debounce-test';