browser-sync - npm Package Compare versions

Comparing version 0.5.6 to 0.5.7

Gruntfile.js

@@ -45,3 +45,15 @@ "use strict";
                 },
-                src: ["test/server/**/*.js", "test/client-script/**/*.js", "!test/client-script/libs/**/*"]
+                src: [
+                    "test/server/**/*.js",
+                    "test/client-script/**/*.js",
+                    "!test/client-script/libs/**/*"
+                ]
+            },
+            testControl: {
+                options: {
+                    jshintrc: "test/control-panel/.jshintrc"
+                },
+                src: [
+                    "test/control-panel/specs/*.js"
+                ]
             }
@@ -68,2 +80,3 @@ },
                     "test/client-script/**/*.js",
+                    "!test/control-panel/vendor/*.js",
                     "!test/client-script/libs"
@@ -82,2 +95,10 @@ ],
                 singleRun: false
+            },
+            controlPanel: {
+                configFile: "test/control-panel/karma.conf.js",
+                singleRun: true
+            },
+            controlPanelWatch: {
+                configFile: "test/control-panel/karma.conf.js",
+                singleRun: false
             }
@@ -141,5 +162,5 @@ },
     grunt.registerTask("test:client", ["jshint", "karma:unit"]);
-    grunt.registerTask("test", ["jshint", "karma:unit", "mochaTest"]);
+    grunt.registerTask("test", ["jshint", "karma:unit", "karma:controlPanel", "mochaTest"]);
 
     grunt.registerTask("release:github", ["jshint", "karma:unit", "mochaTest", "shell:github"]);
 };

lib/browser-sync.js

@@ -10,3 +10,8 @@ "use strict";
 var messages = require("./messages");
+var api = require("./api");
 var controlPanel = require("./control-panel");
+var events = require("events");
+var open = require("open");
+var emitter = new events.EventEmitter();
+emitter.setMaxListeners(20);
 var fileWatcher = require("./file-watcher");
@@ -40,8 +45,8 @@ var serverModule = require("./server");
 
-        this.userOptions  = options;
-        var minPorts      = (options.server || options.proxy) ? 3 : this.options.minPorts;
-        var minPortRange  = options.ports && options.ports.min;
-        var maxPortRange  = options.ports && options.ports.max;
-        var portRange     = portScanner.getPortRange(minPorts, minPortRange, maxPortRange);
-        var callback      = this.getPortsCallback(files, options);
+        this.userOptions = options;
+        var minPorts = (options.server || options.proxy) ? 3 : this.options.minPorts;
+        var minPortRange = options.ports && options.ports.min;
+        var maxPortRange = options.ports && options.ports.max;
+        var portRange = portScanner.getPortRange(minPorts, minPortRange, maxPortRange);
+        var callback = this.getPortsCallback(files, options);
 
@@ -53,2 +58,4 @@ if (portRange) {
         }
+
+        return emitter;
     },
@@ -104,25 +111,65 @@ /**
 
-        var ports   = args.ports;
-        var files   = args.files;
+        var ports = args.ports;
+        var files = args.files;
         var options = args.options;
-        var hostIp  = this.getHostIp(options, devIp.getIp(null));
         var msg;
-
         var ioLocal = this.setupSocket(ports);
+        var callbacks = this.getSocketCallbacks();
+        var servers;
 
-        this.handleSocketConnection(this.ghostModeCallbacks, options, this.handleClientSocketEvent);
+        options.host = this.getHostIp(options, devIp.getIp(null));
 
-        fileWatcher.init(this.changeFile, this.log, files, ioLocal, options, this);
+        // register internal events
+        this.registerEvents(emitter, options, ioLocal);
 
-        // launch the server
+        // Handle socket connections
+        this.handleSocketConnection(callbacks, options, this.handleClientSocketEvent);
+
+        // Start file watcher
+        fileWatcher.init(files, options, emitter);
+
+        // launch the server/proxy
         if (options.server || options.proxy) {
-            this.initServer(hostIp, ports, options, ioLocal);
+            servers = this.initServer(options.host, ports, options, ioLocal);
         } else {
-            msg = messages.init(hostIp, ports);
+            msg = messages.init(options.host, ports);
             this.log(msg, options, true);
         }
 
-        controlPanel.launchControlPanel(hostIp, ports, options, ioLocal);
+        // Launch the control panel
+        controlPanel.launchControlPanel(options.host, ports, options);
+
+        // get/emit the api
+        var bsApi = api.getApi(ports, options, servers);
+
+        emitter.emit("init", bsApi);
     },
     /**
+     * Internal Events
+     * @param {EventEmitter} emitter
+     * @param {Object} options
+     * @param {Socket} ioLocal
+     */
+    registerEvents: function (emitter, options, ioLocal) {
+        var _this = this;
+        emitter.on("file:changed", function (data) {
+            _this.changeFile(data.path, options);
+        });
+        emitter.on("file:reload", function (data) {
+            ioLocal.sockets.emit("reload", data);
+        });
+        emitter.on("log", function (data) {
+            _this.log(data.msg, options, data.override);
+        });
+    },
+    getEmitter: function () {
+        return emitter;
+    },
+    /**
+     * @returns {*}
+     */
+    getSocketCallbacks: function () {
+        return _.union(this.ghostModeCallbacks, controlPanel.controlPanelEvents);
+    },
+    /**
      * Set up the socket.io server
@@ -150,6 +197,5 @@ * @param {Object} ports
         var ua;
+
         io.sockets.on("connection", function (client) {
 
-            clients.push(client);
-
             // set ghostmode callbacks
@@ -166,5 +212,7 @@ if (userOptions.ghostMode) {
 
+            clients.push(client);
+
             _this.logConnection(ua, userOptions);
 
-            client.on("disconnect", function() {
+            client.on("disconnect", function () {
                 clients.splice(clients.indexOf(client), 1);
@@ -262,3 +310,3 @@ });
 
-        var fallback  = "0.0.0.0";
+        var fallback = "0.0.0.0";
 
@@ -336,3 +384,2 @@ if (options) {
      * @param {String} path
-     * @param {socket} io
      * @param {Object} options
@@ -342,6 +389,6 @@ * @param _this - context
      */
-    changeFile: function (path, io, options, _this) {
+    changeFile: function (path, options) {
 
         var fileName = filePath.basename(path);
-        var fileExtension = _this.getFileExtension(path);
+        var fileExtension = this.getFileExtension(path);
 
@@ -362,7 +409,7 @@ var data = {
         // emit the event through socket
-        io.sockets.emit("reload", data);
+        emitter.emit("file:reload", data);
 
         // log the message to the console
-        _this.log(messages.files.changed(_this.resolveRelativeFilePath(path, _this.cwd)), options, false);
-        _this.log(messages.browser[message](), options, false);
+        emitter.emit("log", {msg: messages.files.changed(this.resolveRelativeFilePath(path, this.cwd)), override: false});
+        emitter.emit("log", {msg: messages.browser[message](), override: false});
 
@@ -381,5 +428,5 @@ return data;
 
-        var proxy  = options.proxy || false;
+        var proxy = options.proxy || false;
         var server = options.server || false;
-        var open   = false;
+        var open = false;
         var msg;
@@ -399,4 +446,7 @@
 
+        options.url = messages._makeUrl(host, ports[open], "http:");
+
         if (open) {
-            this.openBrowser(host, ports[open], options);
+            // Add test for this!
+            this.openBrowser(options.url, options);
         }
@@ -410,10 +460,8 @@
      * Open the page in browser
-     * @param {String} host
-     * @param {String|Number} port
+     * @param {String} url
      * @param {Object} options
      */
-    openBrowser: function (host, port, options) {
+    openBrowser: function (url, options) {
         if (options.open) {
-            var url = messages._makeUrl(host, port, "http:");
-            require("open")(url);
+            open(url);
         }
@@ -420,0 +468,0 @@ },

lib/client/browser-sync-client.js

@@ -665,2 +665,3 @@ "use strict";
     socket.on("connection", function (options) {
+        ghost.emitEvent("browser:add", {width: 200, height: 100});
         browserSync.processOptions(scope, options, ghost.utils, ghost.listeners);
@@ -667,0 +668,0 @@ });

lib/config.js

@@ -122,4 +122,12 @@ /*
      */
-    excludedFileTypes: []
+    excludedFileTypes: [],
 
+    /*
+     |--------------------------------------------------------------------------
+     | Reload Delay
+     |--------------------------------------------------------------------------
+     | https://github.com/shakyShane/browser-sync/wiki/options#wiki-reloadDelay
+     */
+    reloadDelay: 0
+
 };

lib/control-panel.js

@@ -8,10 +8,10 @@ "use strict";
 var fs = require("fs");
-//var proxyModule = require("./proxy");
 var filePath = require("path");
-//var snippetUtils = require("./snippet").utils;
 
+//var connected = false;
+
 var utils = {
-    modifySnippet: function (host, port, options) {
+    modifySnippet: function (host, port, options, clientScript) {
 
-        var jsFile    = fs.readFileSync(__dirname + messages.clientScript(options));
+        var jsFile    = fs.readFileSync(__dirname + clientScript);
         var jsShims   = fs.readFileSync(__dirname + messages.client.shims);
@@ -37,10 +37,11 @@ var result    = jsShims + jsFile;
  */
-module.exports.launchControlPanel = function (host, ports, options /*, io*/) {
+module.exports.launchControlPanel = function (host, ports, options) {
 
-    var modifySnippet = utils.modifySnippet(host, ports.socket, options);
-    var baseDir = __dirname + "/control-panel";
+    var clientScript  = messages.clientScript(options);
+    var modifySnippet = utils.modifySnippet(host, ports.socket, options, clientScript);
+    var baseDir       = __dirname + "/control-panel";
 
     var app = connect()
         .use(loadSnippet(host, ports, options, "controlPanel"))
-        .use(messages.clientScript(), modifySnippet)
+        .use(clientScript, modifySnippet)
         .use(connect.static(filePath.resolve(baseDir)));
@@ -51,2 +52,17 @@
     return controlPanelServer;
-};
+};
+
+module.exports.controlPanelEvents = [
+    {
+        name: "cp:goTo",
+        callback: function (client, data) {
+            client.broadcast.emit("location:update", {url: data.url});
+        }
+    },
+    {
+        name: "connection",
+        callback: function (client, data) {
+            console.log("connection event ", data);
+        }
+    }
+];

lib/control-panel/js/app.js

@@ -6,20 +6,49 @@ /*global window*/
     "use strict";
-    var app = angular.module("browserSync", []);
 
-    socket.emit("context", "controlPanel");
+    var app = angular.module("BrowserSync", []);
 
-    app.controller("MainCtrl", function ($scope) {
+    /**
+     * Socket Factory
+     */
+    app.service("Socket", function () {
+        return {
+            addEvent: function (name, callback) {
+                socket.on(name, callback);
+            },
+            removeEvent: function (name, callback) {
+                socket.removeListener(name, callback);
+            }
+        };
+    });
 
+
+    /**
+     * Options Factory
+     */
+    app.service("Options", function () {
+        return {
+
+        };
+    });
+
+    /**
+     * Main Ctrl
+     */
+    app.controller("MainCtrl", function ($scope, removeCpFilter, Socket) {
+
+        $scope.options = false;
         $scope.browsers = [];
-        $scope.options  = {};
+        $scope.socketId = "";
 
-        var socketEvents = {
-            init: function (data) {
+        $scope.socketEvents = {
+            connection: function (options) {
+                var _this = this;
                 $scope.$apply(function () {
-                    $scope.options = data.options;
+                    $scope.socketId = _this.socket.sessionid;
+                    $scope.options = options;
                 });
             },
-            connection: function (data) {
+            addBrowsers: function (browsers) {
                 $scope.$apply(function () {
-                    $scope.browsers.push(data.browser);
+                    $scope.browsers = removeCpFilter(browsers, $scope.socketId);
                 });
@@ -29,6 +58,42 @@ }
 
-        socket.on("controlPanel:init", socketEvents.init);
-        socket.on("controlPanel:connection", socketEvents.connection);
+        $scope.goTo = function (url) {
+            socket.emit("cp:goTo", {url: url});
+        };
+
+        Socket.addEvent("connection", $scope.socketEvents.connection);
+        Socket.addEvent("cp:browser:update", $scope.socketEvents.addBrowsers);
     });
 
+    /**
+     * URL info header
+     */
+    app.directive("urlInfo", function () {
+        return {
+            restrict: "E",
+            scope: {
+                options: "="
+            },
+            template: "<h1><small>{{type}} running at: </small><a href=\"{{url}}\" target='_blank'>{{url}}</h1></a>",
+            controller: function ($scope) {
+                $scope.url = $scope.options.url;
+                $scope.type = $scope.options.server ? "Server" : "Proxy";
+            }
+        };
+    });
+
+    /**
+     * Remove control panel from list of items
+     */
+    app.filter("removeCp", function () {
+        return function (items, id) {
+            var filtered = [];
+            items.forEach(function (item) {
+                if (item.id !== id) {
+                    filtered.push(item);
+                }
+            });
+            return filtered;
+        };
+    });
+
 }(window, (typeof ___socket___ === "undefined") ? {} : ___socket___));

lib/file-watcher.js

@@ -11,9 +11,7 @@ "use strict";
      * Handle changed files
-     * @param {Function} callback
-     * @param {socket} io
      * @param {Object} options
-     * @param {Object} _this
+     * @param {EventEmitter} emitter
      * @returns {Function}
      */
-    getChangeCallback: function (callback, io, options, _this) {
+    getChangeCallback: function (options, emitter) {
 
@@ -28,4 +26,9 @@ var lastInjected = {
 
-            var doCallback = function () {
-                callback(filepath, io, options, _this);
+            var emitEvent = function () {
+                lastInjected.time = new Date().getTime();
+                lastInjected.file = filepath;
+
+                setTimeout(function () {
+                    emitter.emit("file:changed", {path: filepath});
+                }, options.reloadDelay || 0);
             };
@@ -41,23 +44,16 @@
                     }
+
                     count += 200;
 
                     if (fs.statSync(filepath).size > 0) {
-
-                        lastInjected.time = new Date().getTime();
-                        lastInjected.file = filepath;
-
-                        doCallback();
+                        emitEvent();
                         clearInterval(writeCheck);
                     }
+
                 }, 200);
+
             } else {
-
-                if (new Date().getTime() > lastInjected.time + (options.fileTimeout || 2000)) {
-                    doCallback();
-                } else {
-
+                if (new Date().getTime() >= lastInjected.time + (options.fileTimeout || 0)) {
+                    emitEvent();
                 }
-
-                lastInjected.time = new Date().getTime();
-                lastInjected.file = filepath;
             }
@@ -68,7 +64,7 @@ };
      * Function to be called when watching begins
-     * @param {Function} log
      * @param {Object} options
+     * @param {EventEmitter} emitter
      * @returns {Function}
      */
-    getWatchCallback: function (log, options) {
+    getWatchCallback: function (options, emitter) {
 
@@ -79,5 +75,5 @@ return function (watcher) {
             if (key) {
-                log(messages.files.watching(watcher._patterns), options, true);
+                emitter.emit("log", {msg: messages.files.watching(watcher._patterns), override: true});
             } else {
-                log(messages.files.watching(), options, true);
+                emitter.emit("log", {msg: messages.files.watching(), override: true});
             }
@@ -95,13 +91,10 @@ };
     /**
-     * @param {Function} changeFile
-     * @param {Function} log
      * @param {Array} files
-     * @param {socket} io
      * @param {Object} options
-     * @param {Object} _this
+     * @param {EventEmitter} emitter
      */
-    init: function (changeFile, log, files, io, options, _this) {
+    init: function (files, options, emitter) {
 
-        var watchCallback = this.getWatchCallback(log, options);
-        var changeCallback = this.getChangeCallback(changeFile, io, options, _this);
+        var watchCallback = this.getWatchCallback(options, emitter);
+        var changeCallback = this.getChangeCallback(options, emitter);
 
@@ -108,0 +101,0 @@ var watcher = this.getWatcher(files);

lib/index.js

@@ -30,2 +30,3 @@ #! /usr/bin/env node
     scrollThrottle: 0,
+    reloadDelay: 0,
     injectChanges: true,
@@ -411,3 +412,3 @@ excludedFileTypes: [
     kickoff: function (files, config) {
-        browserSync.init(files || [], config);
+        return browserSync.init(files || [], config);
     }
@@ -458,3 +459,3 @@ };
     }
-    setup.kickoff(files, config);
+    return setup.kickoff(files, config);
 };

lib/server.js

@@ -12,3 +12,5 @@ "use strict";
     /**
-     * Wait for 1 second
+     * The middleware that can emit location change events.
+     * @param {Object} io
+     * @param {Object} options
      * @returns {Function}
@@ -108,2 +110,3 @@ */
                 .use(connect.static(filePath.resolve(baseDir), { index: index }));
+
         staticServer = http.createServer(app).listen(ports.server);
@@ -110,0 +113,0 @@ }

package.json

 {
   "name": "browser-sync",
   "description": "Live CSS Reload & Browser Syncing",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "homepage": "https://github.com/shakyshane/browser-sync",
@@ -54,3 +54,3 @@ "author": {
     "karma-coffee-preprocessor": "~0.1.0",
-    "karma": "~0.10.2",
+    "karma": "~0.10.x",
     "grunt-karma": "~0.6.2",
@@ -57,0 +57,0 @@ "grunt-cli": "*",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1548428

increased by457.91%

Number of package files

71

increased by91.89%

Lines of code

19218

increased by610.46%

Worsened metrics

Number of medium supply chain risk alerts

4

increased by33.33%

No dependency changes