browser-sync-ui - npm Package Compare versions

Comparing version 0.0.13 to 0.0.14

index.js

 "use strict";
 
-var async       = require("./lib/async");
-var hooks       = require("./lib/hooks");
+var UI          = require("./lib/UI");
 var config      = require("./lib/config");
-var merge       = require("./lib/opts").merge;
 var Events      = require("events").EventEmitter;
 
-var defaultPlugins = {
-    "sync-options": require("./lib/plugins/sync-options/sync-options"),
-    "overview":     require("./lib/plugins/overview/overview"),
-    "history":      require("./lib/plugins/history/history"),
-    //"plugins":      require("./lib/plugins/plugins/plugins"),
-    "remote-debug": require("./lib/plugins/remote-debug/remote-debug"),
-    "help":         require("./lib/plugins/help/help"),
-    "connections":  require("./lib/plugins/connections/connections")
-};
-
 /**
- * @param {Object} opts - Any options specifically
- *                        passed to the control panel
- * @param {BrowserSync} bs
- * @param {EventEmitter} emitter
- * @constructor
- * @returns {ControlPanel}
- */
-var ControlPanel = function (opts, bs, emitter) {
-
-    var cp            = this;
-    cp.bs             = bs;
-    cp.config         = config.merge();
-    cp.events         = emitter;
-    cp.opts           = merge(opts);
-    cp.logger         = bs.getLogger(cp.config.get("pluginName"));
-    cp.defaultPlugins = defaultPlugins;
-
-    if (cp.opts.get("logLevel") === "silent") {
-        cp.logger.mute(true);
-    } else {
-        cp.logger.setLevel(cp.opts.get("logLevel"));
-    }
-
-    cp.pluginManager = new bs.utils.easyExtender(defaultPlugins, hooks).init();
-
-    return cp;
-};
-
-/**
- * @param cb
- */
-ControlPanel.prototype.getServer = function (cb) {
-    var cp = this;
-    if (cp.server) {
-        return cp.server;
-    }
-    this.events.on("cp:running", function () {
-        cb(null, cp.server);
-    });
-};
-
-/**
- * Detect an available port
- * @returns {ControlPanel}
- */
-ControlPanel.prototype.init = function () {
-
-    var cp = this;
-    var asyncTasks = [
-        {
-            step: "Setting default plugins",
-            fn:   async.initDefaultHooks
-        },
-        {
-            step: "Finding a free port",
-            fn:   async.findAFreePort
-        },
-        {
-            step: "Starting the Control Panel Server",
-            fn:   async.startServer
-        },
-        {
-            step: "Registering default plugins",
-            fn:   async.registerPlugins
-        },
-        {
-            step: "Add options setting event",
-            fn:   async.addOptionsEvent
-        }
-    ];
-
-    require("async").eachSeries(asyncTasks, function (item, cb) {
-        cp.logger.debug("Starting Step: " + item.step);
-        item.fn(cp, function (err, out) {
-            if (err) {
-                return cb(err);
-            }
-            if (out) {
-                if (out.options) {
-                    Object.keys(out.options).forEach(function (key) {
-                        cp.opts = cp.opts.set(key, out.options[key]);
-                    });
-                }
-                if (out.optionsIn) {
-                    out.optionsIn.forEach(function (item) {
-                        cp.opts = cp.opts.setIn(item.path, item.value);
-                    });
-                }
-                if (out.instance) {
-                    Object.keys(out.instance).forEach(function (key) {
-                        cp[key] = out.instance[key];
-                    });
-                }
-            }
-            cp.logger.debug("{green:Step Complete: " + item.step);
-            cb();
-        });
-    }, function () {
-        cp.events.emit("cp:running", {instance: cp, options: cp.opts});
-        cp.logger.info("Running at: {magenta:http://localhost:%s", cp.opts.get("port"));
-    });
-
-    return this;
-};
-
-/**
  * These hooks are for attaching functionality to BrowserSync
@@ -139,10 +21,10 @@ */
  * @param bs
- * @returns {ControlPanel}
+ * @returns {UI}
  */
 module.exports["plugin"] = function (opts, bs) {
-    var controlPanel = new ControlPanel(opts, bs, new Events());
-    controlPanel.init();
-    return controlPanel;
+    var ui = new UI(opts, bs, new Events());
+    ui.init();
+    return ui;
 };
 
 module.exports["plugin:name"]       = config.defaults.pluginName;

lib/async.js

@@ -0,10 +1,12 @@
+var Immutable = require("immutable");
+
 module.exports = {
     /**
      * The UI uses it's own server/port
-     * @param cp
+     * @param ui
      * @param done
      */
-    findAFreePort: function (cp, done) {
-        var port = cp.opts.get("port");
-        cp.bs.utils.portscanner.findAPortNotInUse(port, port + 100, {
+    findAFreePort: function (ui, done) {
+        var port = ui.opts.get("port");
+        ui.bs.utils.portscanner.findAPortNotInUse(port, port + 100, {
             host: "localhost",
@@ -26,13 +28,13 @@ timeout: 1000
      * building angular config
-     * @param cp
+     * @param ui
      * @param done
      */
-    initDefaultHooks: function (cp, done) {
+    initDefaultHooks: function (ui, done) {
 
-        var out = cp.pluginManager.hook("page", cp);
+        var out = ui.pluginManager.hook("page", ui);
 
         done(null, {
             instance: {
-                clientJs:    cp.pluginManager.hook("client:js"),
-                templates:   cp.pluginManager.hook("templates"),
+                clientJs:    ui.pluginManager.hook("client:js"),
+                templates:   ui.pluginManager.hook("templates"),
                 pagesConfig: out.pagesConfig,
@@ -47,13 +49,13 @@ pages:       out.pagesObj,
      * scripts/routes.
-     * @param cp
+     * @param ui
      * @param done
      */
-    startServer: function (cp, done) {
+    startServer: function (ui, done) {
 
-        var bs          = cp.bs;
-        var port        = cp.opts.get("port");
+        var bs          = ui.bs;
+        var port        = ui.opts.get("port");
 
-        cp.logger.debug("Using port %s", port);
+        ui.logger.debug("Using port %s", port);
 
-        var server = require("./server")(cp, {
+        var server = require("./server")(ui, {
             middleware: {
@@ -63,3 +65,3 @@ socket: bs.getMiddleware("socket-js"),
                     path: bs.options.getIn(["socket", "path"]),
-                    namespace: cp.config.getIn(["socket", "namespace"])
+                    namespace: ui.config.getIn(["socket", "namespace"])
                 })
@@ -69,2 +71,8 @@ }
 
+        bs.registerCleanupTask(function () {
+            if (server.server) {
+                server.server.close();
+            }
+        });
+
         done(null, {
@@ -80,8 +88,8 @@ instance: {
      * Run default plugins
-     * @param cp
+     * @param ui
      * @param done
      */
-    registerPlugins: function (cp, done) {
-        Object.keys(cp.defaultPlugins).forEach(function (key) {
-            cp.pluginManager.get(key)(cp, cp.bs);
+    registerPlugins: function (ui, done) {
+        Object.keys(ui.defaultPlugins).forEach(function (key) {
+            ui.pluginManager.get(key)(ui, ui.bs);
         });
@@ -93,11 +101,10 @@ done();
      * the options are received from the socket
-     * @param cp
+     * @param ui
      * @param done
      */
-    addOptionsEvent: function (cp, done) {
-        var bs = cp.bs;
-        var socket  = bs.io.of(cp.config.getIn(["socket", "namespace"]));
-        var clients = bs.io.of(bs.options.getIn(["socket", "namespace"]));
-        socket.on("connection", function (client) {
+    addOptionsEvent: function (ui, done) {
+        var bs = ui.bs;
+        ui.socket.on("connection", function (client) {
             client.emit("connection", bs.getOptions().toJS());
+            client.emit("cp:connection", ui.options.toJS());
             client.on("cp:get:options", function () {
@@ -108,7 +115,31 @@ client.emit("cp:receive:options", bs.getOptions().toJS());
             client.on("cp:client:proxy", function (evt) {
-                clients.emit(evt.event, evt.data);
+                ui.clients.emit(evt.event, evt.data);
             });
         });
         done();
+    },
+    /**
+     * Allow an API for adding/removing elements to clients
+     * @param ui
+     * @param done
+     */
+    addElementEvents: function (ui, done) {
+
+        var elems = ui.pluginManager.hook("elements");
+        var bs    = ui.bs;
+
+        if (!Object.keys(elems).length) {
+            return done();
+        }
+
+        bs.setOption("clientFiles", Immutable.fromJS(elems));
+
+        done(null, {
+            instance: {
+                enableElement:  require("./client-elements").enable(ui.clients, ui, bs),
+                addElement:     require("./client-elements").addElement,
+                disableElement: require("./client-elements").disable(ui.clients, ui, bs)
+            }
+        });
     }
 };

lib/client-js.js

@@ -66,14 +66,2 @@ "use strict";
 
-    socket.on("cp:add:script", function (data) {
-        if (data.src) {
-            addJs(data);
-        }
-    });
-
-    socket.on("cp:add:css", function (data) {
-        if (data.src) {
-            addCss(data);
-        }
-    });
-
     function addJs(data) {
@@ -80,0 +68,0 @@ (function (e) {

lib/hooks.js

@@ -71,2 +71,18 @@ var fs         = require("fs");
         return createInlineTemplates(hooks);
+    },
+    /**
+     * Allow plugins to register toggle-able elements
+     * @param hooks
+     * @returns {{}}
+     */
+    "elements": function (hooks) {
+        var obj = {};
+        hooks.forEach(function (elements) {
+            elements.forEach(function (item) {
+                if (!obj[item.name]) {
+                    obj[item.name] = item;
+                }
+            });
+        });
+        return obj;
     }
@@ -73,0 +89,0 @@ };

lib/opts.js

 var Immutable  = require("immutable");
-//var transforms = require("./transforms");
 
@@ -4,0 +3,0 @@ var defaults = Immutable.Map({

lib/plugins/connections/connections.js

@@ -50,6 +50,3 @@ var urls      = require("../../urls");
 
-        var socket   = bs.io.of(cp.config.getIn(["socket", "namespace"]));
-        var clients  = bs.io.of(bs.options.getIn(["socket", "namespace"]));
-
-        clients.on("connection", function (client) {
+        cp.clients.on("connection", function (client) {
             client.on("client:heartbeat", function (data) {
@@ -61,4 +58,4 @@ // console.log(data, client.id);
 
-        socket.on("connection", function (client) {
-            client.on("cp:highlight", highlightClient.bind(null, clients));
+        cp.socket.on("connection", function (client) {
+            client.on("cp:highlight", highlightClient.bind(null, cp.clients));
             client.on("cp:get:clients", function () {
@@ -76,4 +73,4 @@ client.emit("cp:receive:clients", registry || []);
 
-            if (clients.sockets.length) {
-                temp = Immutable.List(clients.sockets.map(function (client) {
+            if (cp.clients.sockets.length) {
+                temp = Immutable.List(cp.clients.sockets.map(function (client) {
                     return Immutable.fromJS({
@@ -86,7 +83,7 @@ id: client.id,
                     registry = temp;
-                    sendUpdated(socket, registry.toJS());
+                    sendUpdated(cp.socket, registry.toJS());
                 } else {
                     if (Immutable.is(registry, temp)) {
                         if (!initialSent) {
-                            sendUpdated(socket, registry.toJS());
+                            sendUpdated(cp.socket, registry.toJS());
                             initialSent = true;
@@ -96,3 +93,3 @@ }
                         registry = temp;
-                        sendUpdated(socket, registry.toJS());
+                        sendUpdated(cp.socket, registry.toJS());
                     }
@@ -102,3 +99,2 @@ }
             count += 1;
-
         }, 1000);
@@ -105,0 +101,0 @@

lib/plugins/history/history.js

@@ -34,11 +34,11 @@ var urls      = require("../../urls");
                 var temp = addPath(validUrls, url.parse(data.href), bs.options.get("mode"));
-                sendUpdatedIfChanged(validUrls, temp, socket);
+                sendUpdatedIfChanged(validUrls, temp, cp.socket);
             });
         });
 
-        socket.on("connection", function (cpClient) {
+        cp.socket.on("connection", function (cpClient) {
 
-            sendUpdatedUrls(socket, validUrls);
+            sendUpdatedUrls(cp.socket, validUrls);
 
-            cpClient.on("urls:browser:url", sendToUrl.bind(null, cp, bs, clients));
+            cpClient.on("urls:browser:url", sendToUrl.bind(null, cp, bs, cp.clients));
 
@@ -51,7 +51,7 @@ cpClient.on("cp:get:visited", function (req) {
                 var temp = removePath(validUrls, data.path);
-                sendUpdatedIfChanged(validUrls, temp, socket);
+                sendUpdatedIfChanged(validUrls, temp, cp.socket);
             });
             cpClient.on("cp:clear:visited", function (data) {
                 validUrls = Immutable.OrderedSet([]);
-                sendUpdatedUrls(socket, validUrls);
+                sendUpdatedUrls(cp.socket, validUrls);
             });
@@ -58,0 +58,0 @@ });

lib/plugins/plugins/plugins.js

@@ -16,5 +16,3 @@ var path   = require("path");
 
-        var socket  = bs.io.of(cp.config.getIn(["socket", "namespace"]));
-
-        socket.on("connection", function (client) {
+        cp.socket.on("connection", function (client) {
             client.on("cp:plugins:set",     pluginConfigure.bind(null, cp, bs));
@@ -50,3 +48,3 @@ client.on("cp:plugins:setMany", pluginConfigureMany.bind(null, cp, bs));
  * Configure 1 plugin
- * @param {ControlPanel} cp
+ * @param {UI} cp
  * @param {BrowserSync} bs
@@ -53,0 +51,0 @@ * @param {Object} data

lib/plugins/remote-debug/remote-debug.client.js

@@ -24,3 +24,3 @@ /**
         ctrl.section   = pagesConfig[SECTION_NAME];
-
+        console.log(ctrl.options["clientFiles"]);
         ctrl.items = [
@@ -37,3 +37,3 @@ {
                 title: "CSS Outlining",
-                item: ctrl.options["pesticide"],
+                item: ctrl.options["clientFiles"]["pesticide"],
                 tagline: "Add simple CSS outlines to all elements. (powered by <a href=\"http://pesticide.io\">Pesticide.io</a>)"
@@ -44,15 +44,22 @@ }
         ctrl.toggleDebugger = function (item) {
+            if (item.name === "weinre") {
+                return ctrl.toggleWeinre(item);
+            }
             if (item.active) {
-                return ctrl.enable(item.name);
+                return ctrl.enable(item);
             }
-            return ctrl.disable(item.name);
+            return ctrl.disable(item);
         };
 
-        ctrl.enable = function (name) {
-            Socket.emit("cp:%s:toggle".replace("%s", name), true);
+        ctrl.toggleWeinre = function (item) {
+            Socket.emit("cp:weinre:toggle", item.active);
         };
 
-        ctrl.disable = function (name) {
-            Socket.emit("cp:%s:toggle".replace("%s", name), false);
+        ctrl.enable = function (item) {
+            Socket.emit("cp:clientfile:enable", item);
         };
+
+        ctrl.disable = function (item) {
+            Socket.emit("cp:clientfile:disable", item);
+        };
     }
@@ -59,0 +66,0 @@

lib/plugins/remote-debug/remote-debug.js

@@ -6,4 +6,3 @@ var urls           = require("../../urls");
 var Immutable      = require("immutable");
-var pesticide      = fs.readFileSync(__dirname + "/css/pesticide.min.css", "utf-8");
-//var pesticideDepth = fs.readFileSync(__dirname + "/css/pesticide-depth.css", "utf-8");
+var clientFiles    = require("./client-files");
 
@@ -15,8 +14,4 @@ const PLUGIN_NAME = "Remote Debug";
  */
-var timestamp;
 var weinreApp;
 
-const PESTICIDE_NAME   = "pesticide";
-const PESTICIDE_URL    = "/browser-sync/pesticide.css";
-const PESTICIDE_ID     = "__browser-sync-pesticide__";
 const WEINRE_NAME      = "weinre";
@@ -53,5 +48,2 @@ const WEINRE_PORT      = 8080;
 
-        var socket   = bs.io.of(cp.config.getIn(["socket", "namespace"]));
-        var clients  = bs.io.of(bs.options.getIn(["socket", "namespace"]));
-
         var hostUrl  = getHostUrl(cp, bs);
@@ -62,7 +54,2 @@
 
-        bs.setOption(PESTICIDE_NAME, Immutable.fromJS({
-            name:   PESTICIDE_NAME,
-            active: false
-        }));
-
         bs.setOption(WEINRE_NAME, Immutable.fromJS({
@@ -77,9 +64,12 @@ name:  WEINRE_NAME,
 
-        socket.on("connection", function (client) {
-            client.on("cp:weinre:toggle", toggleDebugger.bind(null, socket, clients, cp, bs));
-            client.on("cp:pesticide:toggle", togglePesticide.bind(null, socket, clients, cp, bs));
+        cp.socket.on("connection", function (client) {
+            client.on("cp:weinre:toggle",      toggleWeinre.bind(null, cp.socket, cp.clients, cp, bs));
+            client.on("cp:clientfile:enable",  enableClientFile.bind(null, cp));
+            client.on("cp:clientfile:disable", disableClientFile.bind(null, cp.clients, cp, bs));
         });
 
-        clients.on("connection", function (client) {
-            updateClients(clientScripts, client);
+        cp.clients.on("connection", function (client) {
+            clientScripts.map(function (item) {
+                cp.addElement(client, item);
+            });
         });
@@ -103,3 +93,4 @@ },
             icon: "bug"
-        }
+        },
+        elements: clientFiles.css
     },
@@ -143,40 +134,14 @@ /**
 /**
- * @param socket
  * @param cp
- * @param bs
- * @param value
+ * @param file
  */
-function togglePesticide (socket, clients, cp, bs, value) {
-
-    if (value !== true) {
-        value = false;
-    }
-
-    if (value) {
-        bs.setOptionIn([PESTICIDE_NAME, "active"], true, {silent: true});
-        clientScripts = clientScripts.set(PESTICIDE_NAME, {
-            type: "css",
-            src:  getRemoteUrl(PESTICIDE_URL, cp, bs),
-            id:   PESTICIDE_ID
-        });
-        bs.serveFile(PESTICIDE_URL, {
-            type: "text/css",
-            content: pesticide
-        });
-        updateClients(clientScripts, clients);
-    } else {
-        bs.setOptionIn([PESTICIDE_NAME, "active"], false, {silent: true});
-        clientScripts = clientScripts.remove(PESTICIDE_NAME);
-        clients.emit("cp:element:remove", {id: PESTICIDE_ID});
-    }
+function enableClientFile (cp, file) {
+    clientScripts = cp.enableElement(clientScripts, file);
 }
 
 /**
- * @param elements
- * @param clients
+ *
  */
-function updateClients (elements, clients) {
-    elements.map(function (value) {
-        clients.emit("cp:element:add", value);
-    });
+function disableClientFile (clients, cp, bs, file) {
+    clientScripts = cp.disableElement(clientScripts, file);
 }
@@ -191,3 +156,3 @@
  */
-function toggleDebugger (socket, clients, cp, bs, value) {
+function toggleWeinre (socket, clients, cp, bs, value) {
 
@@ -211,23 +176,24 @@ if (value !== true) {
         socket.emit("cp:weinre:enabled", _debugger);
-
-        // Add the JS script to the clients elements list
-        clientScripts = clientScripts.set(WEINRE_NAME, {
+        var fileitem = {
             type: "js",
             src: bs.getOptionIn([WEINRE_NAME, "targetUrl"]),
             id: WEINRE_ELEM_ID
-        });
+        };
 
-        // Update all client elements
-        updateClients(clientScripts, clients);
+        // Add the element to all clients
+        cp.addElement(clients, fileitem);
 
+        // Save for page refreshes
+        clientScripts = clientScripts.set("weinre", fileitem);
+
     } else {
+
         // Stop it
         disableWeinre(cp, bs);
 
+        clientScripts = clientScripts.remove("weinre");
+
         // Reset the state
         bs.setOptionIn([WEINRE_NAME, "active"], false, {silent: false}); // Force a reload here
 
-        // Remove the script from client elements list
-        clientScripts = clientScripts.remove(WEINRE_NAME);
-
         // Let the UI know
@@ -238,2 +204,3 @@ socket.emit("cp:weinre:disabled");
         clients.emit("browser:reload");
+
     }
@@ -287,4 +254,3 @@ }
     }
-
     return bs.options.get(WEINRE_NAME).toJS();
 }

lib/plugins/sync-options/sync-options.js

@@ -11,4 +11,3 @@ var path = require("path");
     "plugin": function (cp, bs) {
-        var socket  = bs.io.of(cp.config.getIn(["socket", "namespace"]));
-        socket.on("connection", function (client) {
+        cp.socket.on("connection", function (client) {
             client.on("cp:option:set", setOption.bind(null, cp, bs));
@@ -15,0 +14,0 @@ client.on("cp:option:setMany", setOptions.bind(null, cp, bs));

lib/server.js

@@ -54,3 +54,3 @@ var http        = require("http");
 /**
- * @param {ControlPanel} controlPanel
+ * @param {UI} controlPanel
  * @param opts
@@ -57,0 +57,0 @@ * @returns {*}

package.json

 {
   "name": "browser-sync-ui",
   "description": "User Interface for BrowserSync",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "homepage": "http://www.browsersync.io/",
@@ -52,3 +52,3 @@ "author": {
     "async": "^0.9.0",
-    "browser-sync": "git://github.com/shakyshane/browser-sync#v2-rc2.7",
+    "browser-sync": "git://github.com/shakyshane/browser-sync#v2-rc2.8",
     "bs-html-injector": "^1.2.1",
@@ -55,0 +55,0 @@ "chai": "^1.9.1",

public/js/app.js

@@ -393,3 +393,3 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
                 scope: {},
-                template: "<div class=\"notification\" ng-class=\"{\'active\': ui.visible}\">\n    <p class=\"notification__text\">{{ui.heading}} <span class=\"color--lime\">{{ui.message}}</span></p>\n</div>",
+                template: "<div bs-notify ng-class=\"{\'active\': ui.visible}\">\n    <p class=\"notification__text\">{{ui.heading}} <span class=\"color--lime\">{{ui.message}}</span></p>\n</div>",
                 controller: ["$scope", "$rootScope", notifyController]
@@ -396,0 +396,0 @@ };

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

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

3566982

increased by3.55%

Number of package files

136

increased by4.62%

Lines of code

5197

increased by0.29%

Worsened metrics

Number of low supply chain risk alerts

20

increased by5.26%

No dependency changes