Add the script tag after-render

addon/loaders/css.js

@@ -1,5 +1,6 @@
 import RSVP from 'rsvp';
 import { createLoadElement, nodeLoader } from './utilities';
+import { scheduleWork } from './scheduler';
 
 /**
  * Default loader function for CSS assets. Loads them by inserting a link tag
@@ -19,34 +20,46 @@ export default nodeLoader(function css(uri) {
       return resolve();
     }
 
-    // Try using the default onload/onerror handlers...
-    const link = createLoadElement('link', resolve, reject);
+    scheduleWork(() => {
+      let link;
+      try {
+        // Try using the default onload/onerror handlers...
+        link = createLoadElement('link', resolve, reject);
 
-    link.rel = 'stylesheet';
-    link.href = uri;
+        link.rel = 'stylesheet';
+        link.href = uri;
 
-    document.head.appendChild(link);
+        document.head.appendChild(link);
 
-    // In case the browser doesn't fire onload/onerror events, we poll the
-    // the list of stylesheets to see when it loads...
-    function checkSheetLoad() {
-      const resolvedHref = link.href;
-      const stylesheets = document.styleSheets;
-      let i = stylesheets.length;
+        // In case the browser doesn't fire onload/onerror events, we poll the
+        // the list of stylesheets to see when it loads...
 
-      while (i--) {
-        const sheet = stylesheets[i];
-        if (sheet.href === resolvedHref) {
-          // Unfortunately we have no way of knowing if the load was
-          // successful or not, so we always resolve.
-          setTimeout(resolve);
-          return;
-        }
+        setTimeout(checkSheetLoad);
+      } catch(reason) {
+        reject(reason);
       }
 
-      setTimeout(checkSheetLoad);
-    }
+      function checkSheetLoad() {
+        try {
+          const resolvedHref = link.href;
+          const stylesheets = document.styleSheets;
+          let i = stylesheets.length;
+
+          while (i--) {
+            const sheet = stylesheets[i];
+            if (sheet.href === resolvedHref) {
+              // Unfortunately we have no way of knowing if the load was
+              // successful or not, so we always resolve.
+              setTimeout(resolve);
+              return;
+            }
+          }
 
-    setTimeout(checkSheetLoad);
+          setTimeout(checkSheetLoad);
+        } catch(reason) {
+          reject(reason);
+        }
+      }
+    });
   });
 });

addon/loaders/js.js

@@ -1,5 +1,6 @@
 import RSVP from 'rsvp';
 import { createLoadElement, nodeLoader } from './utilities';
+import { scheduleWork } from './scheduler';
 
 /**
  * Default loader function for JS assets. Loads them by inserting a script tag
@@ -15,11 +16,29 @@ export default nodeLoader(function js(uri) {
       return resolve();
     }
 
-    const script = createLoadElement('script', resolve, reject);
+    // DOM mutation should be batched, this indirection enables this batching.
+    // By default, it will schedule work on the next afterRender queue. But can
+    // be configured for further control via.
+    //
+    // ```js
+    //  import { setScheduler } from 'ember-asset-loader/scheduler';
+    //
+    //  setScheduler(function(work /* work is a callback */) {
+    //    someScheduler.scheduleWork(work);
+    //  });
+    // ```
+    //
+    scheduleWork(() => {
+      try {
+        const script = createLoadElement('script', resolve, reject);
 
-    script.src = uri;
-    script.async = false;
+        script.src = uri;
+        script.async = false;
 
-    document.head.appendChild(script);
+        document.head.appendChild(script);
+      } catch(e) {
+        reject(e);
+      }
+    });
   });
 });

addon/loaders/scheduler.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+export const defaultScheduler = (work) => Ember.run.schedule('afterRender', work);
+
+let scheduler = defaultScheduler;
+
+export function setScheduler(_scheduler) {
+  scheduler = _scheduler;
+}
+
+export function scheduleWork(work) {
+  Ember.run.join(scheduler, work);
+}

tests/unit/services/asset-loader-test.js

@@ -5,9 +5,6 @@ function noop() {}
 function shouldNotHappen(assert) {
   return () => assert.ok(false, 'callback should not happen');
 }
-function shouldHappen(assert) {
-  return () => assert.ok(true, 'callback should happen');
-}
 
 moduleFor('service:asset-loader', 'Unit | Service | asset-loader');
 
@@ -252,12 +249,12 @@ test('loadAsset() - retrying a load twice returns the same promise', function(as
 });
 
 test('loadAsset() - js - handles successful load', function(assert) {
-  assert.expect(1);
+  assert.expect(0);
 
   const service = this.subject();
   const asset = { type: 'js', uri: '/unit-test.js' };
 
-  return service.loadAsset(asset).then(shouldHappen(assert), shouldNotHappen(assert));
+  return service.loadAsset(asset);
 });
 
 test('loadAsset() - js - handles failed load', function(assert) {
@@ -266,7 +263,7 @@ test('loadAsset() - js - handles failed load', function(assert) {
   const service = this.subject();
   const asset = { type: 'js', uri: '/unit-test.jsss' };
 
-  return service.loadAsset(asset).then(shouldNotHappen(assert), shouldHappen(assert));
+  return service.loadAsset(asset).catch(() => assert.ok(true, 'loadAsset should reject'));
 });
 
 test('loadAsset() - js - does not insert additional script tag if asset is in DOM already', function(assert) {
@@ -301,12 +298,12 @@ test('loadAsset() - js - sets async false to try to guarantee execution order',
 });
 
 test('loadAsset() - css - handles successful load', function(assert) {
-  assert.expect(1);
+  assert.expect(0);
 
   const service = this.subject();
   const asset = { type: 'css', uri: '/unit-test.css' };
 
-  return service.loadAsset(asset).then(shouldHappen(assert), shouldNotHappen(assert));
+  return service.loadAsset(asset);
 });
 
 test('loadAsset() - css - handles failed load', function(assert) {
@@ -319,9 +316,11 @@ test('loadAsset() - css - handles failed load', function(assert) {
   // non-Chrome browsers to either resolve or reject (they should do something).
   var isChrome = !!window.chrome && window.navigator.vendor === 'Google Inc.';
   if (isChrome) {
-    return service.loadAsset(asset).then(shouldNotHappen(assert), shouldHappen(assert));
+    return service.loadAsset(asset).catch(() => assert.ok(true, 'loadAsset should reject'));
   } else {
-    return service.loadAsset(asset).then(shouldHappen(assert), shouldHappen(assert));
+    return service.loadAsset(asset)
+      .then(() => assert.ok(true, 'loadAsset may resolve'))
+      .catch(() => assert.ok(true, 'loadAsset may reject'));
   }
 });