Queue up widgets to be initialize manually

This turns out to be faster than making dozens of calls
to setTimeout in chrome. Setting up the timers was taking ~15%
of our setup time in production

Author: wheeyls

src/index.js

@@ -48,6 +48,7 @@
 import $ from 'jquery';
 import { extractOptions } from '@g2crowd/extract-options';
 import camelize from './camelize';
+import queue from './queue';
 import initiationStrategies from './initiationStrategies';
 import selectorBuilder from './selectorBuilder';
 
@@ -59,6 +60,8 @@ class AlreadyRegisteredError extends Error {
   }
 }
 
+const widgetQueue = queue();
+
 const strategies = initiationStrategies({
   nextTick(pluginFn, $$, options, ready) {
     return window.setTimeout(() => pluginFn.call($$, options, ready), 0);
@@ -112,7 +115,10 @@ const widget = function({ attr, data }, loadEvents, fragmentLoadEvents) {
           extractOptions(data, pluginName)
         );
 
-        strategies.get(pluginFn.init)(pluginFn, $$, options, ready);
+        widgetQueue.add(() => {
+          strategies.get(pluginFn.init)(pluginFn, $$, options, ready);
+        });
+        widgetQueue.flush();
 
         $$.data(`vvidget:${name}`, true);
       }
@@ -125,8 +131,6 @@ const widget = function({ attr, data }, loadEvents, fragmentLoadEvents) {
       const names = `${$$.data(data) || ''} ${$$.attr(attr) || ''}`;
 
       names.split(' ').forEach(name => loadWidget($$, name, $$.data()));
-
-      $$.trigger('vvidget:ready');
     });
   };
 

src/queue.js

@@ -0,0 +1,38 @@
+// @format
+
+function queue() {
+  let list = [];
+  let completed = null;
+
+  function flush() {
+    list.forEach(i => i());
+    list = [];
+  }
+
+  const me = {
+    add(item) {
+      list.push(item);
+    },
+
+    flush() {
+      if (!completed) {
+        completed = new Promise(function (resolve) {
+          window.setTimeout(function () {
+            flush();
+            resolve();
+          }, 0);
+        });
+      }
+
+      return completed;
+    },
+
+    size() {
+      return list.length;
+    }
+  };
+
+  return me;
+}
+
+export default queue;

test/camelize.test.js

@@ -2,7 +2,7 @@
 
 import camelize from '../src/camelize';
 
-test('allows adding strategies', () => {
+test('converts strings', () => {
   expect(camelize('camel_case')).toEqual('camelCase');
   expect(camelize('camel-case')).toEqual('camelCase');
   expect(camelize('camelCase')).toEqual('camelCase');

test/queue.test.js

@@ -0,0 +1,35 @@
+// @format
+
+import queue from '../src/queue';
+
+test('can add a function', () => {
+  let q = queue();
+
+  q.add(jest.fn());
+
+  expect(q.size()).toEqual(1);
+});
+
+test('flush calls asynchronously', () => {
+  let q = queue();
+  let fn = jest.fn();
+  q.add(fn);
+  q.flush();
+
+  return q.flush().then(() => {
+    expect(fn.mock.calls.length).toEqual(1);
+  });
+});
+
+test('flush will run fns added after initial call', () => {
+  let q = queue();
+  let fn = jest.fn();
+  let fn2 = jest.fn();
+  q.add(fn);
+  q.flush();
+  q.add(fn2);
+
+  return q.flush().then(() => {
+    expect(fn2.mock.calls.length).toEqual(1);
+  });
+});