fix(snippet): Allow async attribute to be removed from snippet with snippetOptions.async = false - fixes #670

Shane Osbourne · Shane Osbourne · commit c32bec6d464e · 2015-06-17T11:10:58.000+01:00
diff --git a/lib/connect-utils.js b/lib/connect-utils.js
@@ -20,8 +20,8 @@ var connectUtils = {
         }
 
         var template = fs.readFileSync(config.templates.scriptTag, "utf-8");
-
         var scriptPath = this.clientScript(options);
+        var async = options.getIn(["snippetOptions", "async"]);
         var script;
         var override = false;
 
@@ -38,7 +38,8 @@ var connectUtils = {
         }
 
         template = template
-            .replace("%script%", script);
+            .replace("%script%", script)
+            .replace("%async%", async ? "async" : "");
 
         return template;
     },
diff --git a/lib/default-config.js b/lib/default-config.js
@@ -158,19 +158,21 @@ module.exports = {
     logSnippet: true,
 
     /**
-     * SINCE 1.7.0! You can control how the snippet is injected
+     * You can control how the snippet is injected
      * onto each page via a custom regex + function.
      * You can also provide patterns for certain urls
      * that should be ignored from the snippet injection.
      * @property snippetOptions
      * @since 2.0.0
+     * @param {Boolean} [async] - should the script tags have the async attribute?
      * @param {Array} [blacklist]
      * @param {Array} [whitelist]
      * @param {RegExp} [rule.match=/&lt;body&#91;^&gt;&#93;*&gt;/i]
      * @param {Function} [rule.fn=Function]
      * @type Object
      */
     snippetOptions: {
+        async: true,
         whitelist: [],
         blacklist: [],
         rule: {
diff --git a/lib/templates/script-tags.tmpl b/lib/templates/script-tags.tmpl
@@ -1,3 +1,3 @@
 <script type='text/javascript' id="__bs_script__">//<![CDATA[
-    document.write("<script async src='%script%'><\/script>".replace("HOST", location.hostname));
-//]]></script>
+    document.write("<script %async%src='%script%'><\/script>".replace("HOST", location.hostname));
+//]]></script>
diff --git a/test/specs/e2e/e2e.options.script.async.js b/test/specs/e2e/e2e.options.script.async.js
@@ -0,0 +1,32 @@
+"use strict";
+
+var browserSync = require("../../../");
+
+var assert = require("chai").assert;
+
+describe("E2E script with/without async attribute", function () {
+
+    it("serves with async", function (done) {
+        browserSync.reset();
+        var config = {open: false};
+        browserSync(config, function (err, bs) {
+            assert.include(bs.options.get("snippet"), "async");
+            bs.cleanup();
+            done();
+        });
+    });
+    it("serves without async", function (done) {
+        browserSync.reset();
+        var config = {
+            open: false,
+            snippetOptions: {
+                async: false
+            }
+        };
+        browserSync(config, function (err, bs) {
+            assert.notInclude(bs.options.get("snippet"), "async");
+            bs.cleanup();
+            done();
+        });
+    });
+});
