Add script.domain property - re: #1128

Author: shakyShane

lib/config.js

@@ -11,6 +11,7 @@ module.exports = {
     },
     templates: {
         scriptTag: path.join(__dirname, "templates/script-tags.tmpl"),
+        scriptTagSimple: path.join(__dirname, "templates/script-tags-simple.tmpl"),
         connector: path.join(__dirname, "templates/connector.tmpl")
     },
     socketIoScript: "/public/socket.io.js",

lib/connect-utils.js

@@ -4,44 +4,91 @@ var _             = require("../lodash.custom");
 var fs            = require("fs");
 var config        = require("./config");
 
+function getPath(options, relative, port) {
+    if (options.get("mode") === "snippet") {
+        return options.get("scheme") + "://HOST:" + port + relative;
+    } else {
+        return "//HOST:" + port + relative;
+    }
+}
+
 var connectUtils = {
     /**
      * @param {Immutable.Map} options
      * @returns {String}
      */
     scriptTags: function (options) {
 
-        function getPath(relative, port) {
-            if (options.get("mode") === "snippet") {
-                return options.get("scheme") + "://HOST:" + port + relative;
-            } else {
-                return "//HOST:" + port + relative;
+        var scriptPath     = this.clientScript(options);
+        var async          = options.getIn(["snippetOptions", "async"]);
+        var scriptDomain   = options.getIn(["script", "domain"]);
+
+        /**
+         * Generate the [src] attribute based on user options
+         */
+        var scriptSrc = (function () {
+
+            /**
+             * First, was 'scriptPath' set? if so the user wanted full control over the
+             * script tag output
+             *
+             */
+            if (_.isFunction(options.get("scriptPath"))) {
+                return options.get("scriptPath").apply(null, getScriptArgs(options, scriptPath));
             }
-        }
 
-        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;
-
-        if (_.isFunction(options.get("scriptPath"))) {
-            var args = getScriptArgs(options, scriptPath);
-            script   = options.get("scriptPath").apply(null, args);
-            override = true;
-        } else {
-            script = getPath(scriptPath, options.get("port"));
-        }
+            /**
+             * Next, if 'script.domain' was given, allow that + the path to the JS file
+             * eg:
+             *  script.domain=localhost:3000
+             * -> localhost:3000/browser-sync/browser-sync-client.js
+             */
+            if (scriptDomain) {
+                if (_.isFunction(scriptDomain)) {
+                    return scriptDomain.call(null, options) + scriptPath;
+                }
+                if (scriptDomain.match(/\{port\}/)) {
+                    return scriptDomain.replace("{port}", options.get("port")) + scriptPath;
+                }
+                return scriptDomain + scriptPath;
+            }
 
-        if (!override && (options.get("server") || options.get("proxy"))) {
-            script = scriptPath;
-        }
+            /**
+             * Now if server or proxy, use dynamic script
+             * eg:
+             *  browser-sync start --server
+             * ->
+             *  "HOST:3000/browser-sync/browser-sync-client.js".replace("HOST", location.hostname)
+             */
+            if (options.get("server") || options.get("proxy")) {
+                return scriptPath;
+            }
 
-        template = template
-            .replace("%script%", script)
-            .replace("%async%", async ? "async" : "");
+            /**
+             * Final use case is snippet mode
+             * -> "http://HOST:3000/browser-sync/browser-sync-client.js".replace("HOST", location.hostname)
+             * -> "//HOST:3000/browser-sync/browser-sync-client.js".replace("HOST", location.hostname)"
+             */
+            return getPath(options, scriptPath, options.get("port"));
+        })();
 
-        return template;
+        /**
+         * Decide which template shall be used to generate the script tags
+         */
+        var template = (function () {
+            if (scriptDomain) {
+                return config.templates.scriptTagSimple;
+            }
+            return config.templates.scriptTag;
+        })();
+
+        /**
+         * Finally read the template file from disk and replace
+         * the dynamic values.
+         */
+        return fs.readFileSync(template, "utf8")
+            .replace("%script%", scriptSrc)
+            .replace("%async%", async ? "async" : "");
     },
     /**
      * @param {Map} options
@@ -116,17 +163,32 @@ var connectUtils = {
             port = options.getIn(["socket", "port"]);
         }
 
-        if (socketOpts.domain) {
-            string = withDomain;
-            if (typeof socketOpts.domain === "function") {
-                socketOpts.domain = socketOpts.domain.call(null, options);
+        /**
+         * Ensure socket.domain is always a string (for noop replacements later)
+         */
+        socketOpts.domain = (function () {
+            if (socketOpts.domain) {
+                string = withDomain;
+                /**
+                 * User provided a function
+                 */
+                if (_.isFunction(socketOpts.domain)) {
+                    return socketOpts.domain.call(null, options);
+                }
+                /**
+                 * User provided a string
+                 */
+                if (_.isString(socketOpts.domain)) {
+                    return socketOpts.domain;
+                }
             }
-        }
+            return "";
+        })();
 
         return string
             .replace("{protocol}", protocol)
             .replace("{port}",     port)
-            .replace("{domain}",   socketOpts.domain)
+            .replace("{domain}",   socketOpts.domain.replace("{port}", port))
             .replace("{ns}",       namespace);
     },
     /**

lib/default-config.js

@@ -444,6 +444,14 @@ module.exports = {
         }
     },
 
+    /**
+     * Configure the script domain
+     * @property script
+     * @param {String|Function} [domain=undefined]
+     * @since 2.14.0
+     * @type Object
+     */
+
     tagNames: {
         "less": "link",
         "scss": "link",

lib/templates/script-tags-simple.tmpl

@@ -0,0 +1 @@
+<script %async% id="__bs_script__" src="%script%"></script>

test/specs/e2e/e2e.options.scriptpath.js

@@ -6,10 +6,7 @@ var assert = require("chai").assert;
 var request = require("supertest");
 
 describe("E2E script path test - given a callback", function () {
-
-    var instance;
-
-    before(function (done) {
+    it("Sets the script path", function (done) {
         browserSync.reset();
 
         var config = {
@@ -21,19 +18,15 @@ describe("E2E script path test - given a callback", function () {
                 return "localhost:PORT" + scriptPath;
             }
         };
-        instance = browserSync(config, done).instance;
-    });
-
-    after(function () {
-        instance.cleanup();
-    });
-
-    it("Sets the script path", function () {
-        assert.include(instance.options.get("snippet"), "localhost:PORT/browser-sync/browser-sync-client.");
+        browserSync(config, function (err, bs) {
+            assert.include(bs.options.get("snippet"), "localhost:PORT/browser-sync/browser-sync-client.");
+            bs.cleanup();
+            done();
+        });
     });
 });
 
-describe("E2E Socket path test - given a callback", function () {
+describe("E2E Socket namespace test - given a string", function () {
 
     var instance;
 
@@ -55,7 +48,7 @@ describe("E2E Socket path test - given a callback", function () {
         instance.cleanup();
     });
 
-    it("sets the socket path", function (done) {
+    it("sets the socket namespace", function (done) {
         request(instance.server)
             .get(instance.options.getIn(["scriptPaths", "path"]))
             .expect(200)

test/specs/utils/utils.connect.js

@@ -1,6 +1,8 @@
 "use strict";
 
 var utils  = require("../../../lib/connect-utils");
+var bs     = require("../../../");
+var req    = require("supertest");
 var merge  = require("../../../lib/cli/cli-options").merge;
 var assert = require("chai").assert;
 
@@ -144,4 +146,81 @@ describe("Connection snippetUtils", function () {
         var actual   = utils.socketConnector(options);
         assert.include(actual, "___browserSync___.io('' + location.host + '/browser-sync', ___browserSync___.socketConfig);");
     });
+    it("E2E Should allow setting of socket.domain + script.domain as strings", function (done) {
+        bs.reset();
+        bs.create().init({
+            ui: false,
+            logLevel: "silent",
+            script: {
+                domain: "http://localhost:3000"
+            },
+            socket: {
+                domain: "http://localhost:3000"
+            }
+        }, function (err, bs) {
+
+            assert.include(bs.options.get("snippet"), "<script async id=\"__bs_script__\" src=\"http://localhost:3000/browser-sync");
+
+            var expected = "___browserSync___.io('http://localhost:3000/browser-sync'";
+
+            req(bs.server)
+                .get(bs.options.getIn(["scriptPaths", "path"]))
+                .expect(200)
+                .end(function (err, res) {
+                    assert.include(res.text, expected, "Socket domain updated in response");
+                    bs.cleanup();
+                    done();
+                });
+        });
+    });
+    it("E2E Should allow setting of script.domain as functions", function (done) {
+        bs.reset();
+        bs.create().init({
+            ui: false,
+            logLevel: "silent",
+            script: {
+                domain: function (options) {
+                    return "http://mylocal:" + options.get("port");
+                }
+            }
+        }, function (err, bs) {
+            assert.include(bs.options.get("snippet"), "<script async id=\"__bs_script__\" src=\"http://mylocal:3000/browser-sync");
+            bs.cleanup();
+            done();
+        });
+    });
+    it("E2E Should allow setting of script.domain with placeholder", function (done) {
+        bs.reset();
+        bs.create().init({
+            ui: false,
+            logLevel: "silent",
+            script: {
+                domain: "http://localhost:{port}"
+            }
+        }, function (err, bs) {
+            assert.ok(bs.options.get("snippet").match(/http:\/\/localhost:\d{4,5}\/browser-sync/));
+            bs.cleanup();
+            done();
+        });
+    });
+    it("E2E Should allow setting of socket.domain with placeholder", function (done) {
+        bs.reset();
+        bs.create().init({
+            ui: false,
+            logLevel: "silent",
+            socket: {
+                domain: "http://localhost:{port}"
+            }
+        }, function (err, bs) {
+            req(bs.server)
+                .get(bs.options.getIn(["scriptPaths", "path"]))
+                .expect(200)
+                .end(function (err, res) {
+                    // console.log(res.text)
+                    assert.ok(res.text.match(/io\('http:\/\/localhost:\d{4,5}\/browser-sync/));
+                    bs.cleanup();
+                    done();
+                });
+        });
+    });
 });