diff --git a/example.server.js b/example.server.js index 25ecd48..e4653d9 100644 --- a/example.server.js +++ b/example.server.js @@ -50,6 +50,6 @@ var instance = bs({ files: [ "test/fixtures/css/**" ], - open: false, - online: false + open: false + //online: false }); \ No newline at end of file diff --git a/lib/client-elements.js b/lib/client-elements.js index 59f921a..58440d3 100644 --- a/lib/client-elements.js +++ b/lib/client-elements.js @@ -1,5 +1,7 @@ var fs = require("fs"); +const CLIENT_FILES_OPT = "clientFiles"; + /** * Enable a element on clients * @param clients @@ -9,28 +11,25 @@ var fs = require("fs"); */ function enableElement (clients, ui, bs) { - return function (clientScripts, file) { - - var item = ui.getOptionIn(["clientFiles", file.name]).toJS(); - - if (!item.active) { + return function (file) { - ui.setOptionIn(["clientFiles", item.name, "active"], true, {silent: true}); - - if (!item.served) { - ui.setOptionIn(["clientFiles", item.name, "served"], true, {silent: true}); - bs.serveFile(item.src, { - type: "text/css", - content: fs.readFileSync(item.file) - }); - } + var item = ui.getOptionIn([CLIENT_FILES_OPT, file.name]).toJS(); + + if (item.active) { + return; + } - addElement(clients, ui.getOptionIn(["clientFiles", item.name]).toJS()); + ui.setOptionIn([CLIENT_FILES_OPT, item.name, "active"], true, {silent: true}); - return clientScripts.set(item.name, item); + if (!item.served) { + ui.setOptionIn([CLIENT_FILES_OPT, item.name, "served"], true, {silent: true}); + bs.serveFile(item.src, { + type: "text/css", + content: fs.readFileSync(item.file) + }); } - return clientScripts; + addElement(clients, ui.getOptionIn([CLIENT_FILES_OPT, item.name]).toJS()); }; } @@ -42,17 +41,10 @@ function enableElement (clients, ui, bs) { */ function disableElement (clients, ui, bs) { - return function (immMap, file) { - - if (immMap.get(file.name)) { - - var item = ui.getOptionIn(["clientFiles", file.name]).toJS(); - ui.setOptionIn(["clientFiles", item.name, "active"], false, {silent: true}); - removeElement(clients, item.id); - return immMap.remove(item.name); - } - - return immMap; + return function (file) { + var item = ui.getOptionIn([CLIENT_FILES_OPT, file.name]).toJS(); + ui.setOptionIn([CLIENT_FILES_OPT, item.name, "active"], false, {silent: true}); + removeElement(clients, item.id); }; } diff --git a/lib/client-js.js b/lib/client-js.js index 8f163fd..6da8d07 100644 --- a/lib/client-js.js +++ b/lib/client-js.js @@ -50,7 +50,7 @@ }); socket.on("cp:element:add", function (data) { - + var elem = document.getElementById(data.id); if (!elem) { diff --git a/lib/plugins/remote-debug/remote-debug.js b/lib/plugins/remote-debug/remote-debug.js index 8e8ea3a..a136971 100644 --- a/lib/plugins/remote-debug/remote-debug.js +++ b/lib/plugins/remote-debug/remote-debug.js @@ -3,36 +3,10 @@ var url = require("url"); var path = require("path"); var fs = require("fs"); var Immutable = require("immutable"); +var weinre = require("./weinre"); var clientFiles = require("./client-files"); -const PLUGIN_NAME = "Remote Debug"; - -/** - * @type {Immutable.Set} - */ -var weinreApp; - -const WEINRE_NAME = "weinre-debug"; -var weinrePort = 8080; -const WEINRE_ID = "#browsersync"; -const WEINRE_ELEM_ID = "__browser-sync-weinre__"; - -var weinreTargetUrl = { - protocol: "http:", - port: weinrePort, - pathname: "/target/target-script-min.js", - hash: WEINRE_ID -}; - -var weinreClientUrl = { - protocol: "http:", - port: weinrePort, - pathname: "/client/", - hash: WEINRE_ID -}; - -var clientScripts = Immutable.Map(); - +const PLUGIN_NAME = "Remote Debug"; /** * @type {{plugin: Function, plugin:name: string, markup: string}} @@ -44,32 +18,19 @@ module.exports = { */ "plugin": function (ui, bs) { - var hostUrl = getHostUrl(ui, bs); - weinrePort = ui.getOptionIn(["weinre", "port"]); - - weinreTargetUrl.hostname = hostUrl.hostname; - weinreClientUrl.hostname = hostUrl.hostname; - - ui.setOption(WEINRE_NAME, Immutable.fromJS({ - name: WEINRE_NAME, - active: false, - url: false, - targetUrl: url.format(weinreTargetUrl), - clientUrl: url.format(weinreClientUrl), - port: weinrePort - })); - - setWeinreClientUrl(ui, url.format(weinreClientUrl)); + weinre.init(ui); ui.socket.on("connection", function (client) { - client.on("cp:weinre:toggle", toggleWeinre.bind(null, ui.socket, ui.clients, ui, bs)); + client.on("cp:weinre:toggle", weinre.toggleWeinre.bind(null, ui.socket, ui.clients, ui, bs)); client.on("cp:clientfile:enable", enableClientFile.bind(null, ui)); - client.on("cp:clientfile:disable", disableClientFile.bind(null, ui.clients, ui, bs)); + client.on("cp:clientfile:disable", disableClientFile.bind(null, ui)); }); ui.clients.on("connection", function (client) { - clientScripts.map(function (item) { - ui.addElement(client, item); + ui.options.get("clientFiles").map(function (item) { + if (item.get("active")) { + ui.addElement(client, item.toJS()); + } }); }); }, @@ -98,163 +59,17 @@ module.exports = { "plugin:name": PLUGIN_NAME }; -function setWeinreClientUrl(ui, weinreClientUrl) { - var weinre = ui.options.getIn(["clientFiles", "weinre"]).toJS(); - ui.setMany(function (item) { - item.setIn(["clientFiles", "weinre", "hidden"], weinre.hidden.replace("%s", weinreClientUrl)); - return item; - }); -} -/** - * Get a suitable host URL for weinre - * @param ui - * @param bs - * @returns {*} - */ -function getHostUrl(ui, bs) { - - var url = bs.getOptionIn(["urls", "external"]); - - if (!url) { - url = bs.getOptionIn(["urls", "local"]); - } - - return require("url").parse(url); -} - -/** - * If it's snippet mode, create a url that contains host - * @param targetPath - * @param ui - * @param bs - */ -function getRemoteUrl(targetPath, ui, bs) { - if (bs.options.get("mode") === "snippet") { - return ["//", getHostUrl(ui, bs).host, targetPath].join(""); - } - return targetPath; -} - /** * @param ui * @param file */ function enableClientFile (ui, file) { - clientScripts = ui.enableElement(clientScripts, file); + ui.enableElement(file); } /** * */ -function disableClientFile (clients, ui, bs, file) { - clientScripts = ui.disableElement(clientScripts, file); -} - -/** - * @param socket - * @param clients - * @param ui - * @param bs - * @param value - */ -function toggleWeinre (socket, clients, ui, bs, value) { - - if (value !== true) { - value = false; - } - - if (value) { - - var _debugger = enableWeinre(ui, bs); - - // set the state of weinre - ui.setMany(function (item) { - item.setIn([WEINRE_NAME, "active"], true); - item.setIn([WEINRE_NAME, "url"], _debugger.url); - item.setIn([WEINRE_NAME, "active"], true); - item.setIn(["clientFiles", "weinre", "active"], true); - }, {silent: true}); - - - // Let the UI know about it - socket.emit("cp:weinre:enabled", _debugger); - - var fileitem = { - type: "js", - src: ui.getOptionIn([WEINRE_NAME, "targetUrl"]), - id: WEINRE_ELEM_ID - }; - - // Add the element to all clients - ui.addElement(clients, fileitem); - - // Save for page refreshes - clientScripts = clientScripts.set("weinre", fileitem); - - } else { - - // Stop it - disableWeinre(ui, bs); - - clientScripts = clientScripts.remove("weinre"); - - // Reset the state - ui.setOptionIn([WEINRE_NAME, "active"], false, {silent: false}); // Force a reload here - ui.setOptionIn(["clientFiles", "weinre", "active"], false); // Force a reload here - - // Let the UI know - socket.emit("cp:weinre:disabled"); - - // Reload all browsers to remove weinre elements/JS - clients.emit("browser:reload"); - - } -} - -/** - * Enable the debugger - * @param ui - * @param bs - * @returns {{url: string, port: number}} - */ -function enableWeinre (ui, bs) { - - if (weinreApp) { - weinreApp.close(); - weinreApp = false; - } - - var port = ui.getOptionIn([WEINRE_NAME, "port"]); - - var logger = require(path.resolve(__dirname, "../../../node_modules", "weinre", "lib", "utils.js")); - - logger.log = function (message) { - ui.logger.debug("[weinre]: %s", message); - }; - - var weinre = require("weinre"); - var external = getHostUrl(ui, bs); - - weinreApp = weinre.run({ - httpPort: port, - boundHost: external.hostname, - verbose: false, - debug: false, - readTimeout: 5, - deathTimeout: 15 }); - - return ui.options.get(WEINRE_NAME).toJS(); -} - -/** - * @param ui - * @param bs - * @returns {any|*} - */ -function disableWeinre (ui, bs) { - if (weinreApp) { - weinreApp.close(); - weinreApp = false; - } - return ui.options.get(WEINRE_NAME).toJS(); +function disableClientFile (ui, file) { + ui.disableElement(file); } \ No newline at end of file diff --git a/lib/plugins/remote-debug/weinre.js b/lib/plugins/remote-debug/weinre.js new file mode 100644 index 0000000..cfc0f40 --- /dev/null +++ b/lib/plugins/remote-debug/weinre.js @@ -0,0 +1,202 @@ +var url = require("url"); +var Immutable = require("immutable"); +var path = require("path"); + +var weinreApp; + +const WEINRE_NAME = "weinre-debug"; +const WEINRE_ID = "#browsersync"; +const WEINRE_ELEM_ID = "__browser-sync-weinre__"; + +var weinreTargetUrl = { + protocol: "http:", + pathname: "/target/target-script-min.js", + hash: WEINRE_ID +}; + +var weinreClientUrl = { + protocol: "http:", + pathname: "/client/", + hash: WEINRE_ID +}; + +/** + * Prepare weinre for later possible use. + * @param ui + */ +function init (ui) { + + var hostUrl = getHostUrl(ui, ui.bs); + var weinrePort = ui.getOptionIn(["weinre", "port"]); + + weinreTargetUrl.hostname = hostUrl.hostname; + weinreClientUrl.hostname = hostUrl.hostname; + weinreClientUrl.port = weinrePort; + weinreTargetUrl.port = weinrePort; + + ui.setOption(WEINRE_NAME, Immutable.fromJS({ + name: WEINRE_NAME, + active: false, + url: false, + targetUrl: url.format(weinreTargetUrl), + clientUrl: url.format(weinreClientUrl), + port: weinrePort + })); + + setWeinreClientUrl(ui, url.format(weinreClientUrl)); +} + +/** + * Get a suitable host URL for weinre + * @param ui + * @param bs + * @returns {*} + */ +function getHostUrl(ui, bs) { + + var url = bs.getOptionIn(["urls", "external"]); + + if (!url) { + url = bs.getOptionIn(["urls", "local"]); + } + + return require("url").parse(url); +} + + +/** + * @param ui + * @param weinreClientUrl + */ +function setWeinreClientUrl(ui, weinreClientUrl) { + var weinre = ui.options.getIn(["clientFiles", "weinre"]).toJS(); + ui.setMany(function (item) { + item.setIn(["clientFiles", "weinre", "hidden"], weinre.hidden.replace("%s", weinreClientUrl)); + return item; + }); +} + +/** + * If it's snippet mode, create a url that contains host + * @param targetPath + * @param ui + * @param bs + */ +function getRemoteUrl(targetPath, ui, bs) { + if (bs.options.get("mode") === "snippet") { + return ["//", getHostUrl(ui, bs).host, targetPath].join(""); + } + return targetPath; +} + +/** + * @param socket + * @param clients + * @param ui + * @param bs + * @param value + */ +function toggleWeinre (socket, clients, ui, bs, value) { + + if (value !== true) { + value = false; + } + + if (value) { + + var _debugger = enableWeinre(ui, bs); + + // set the state of weinre + ui.setMany(function (item) { + item.setIn([WEINRE_NAME, "active"], true); + item.setIn([WEINRE_NAME, "url"], _debugger.url); + item.setIn([WEINRE_NAME, "active"], true); + item.setIn(["clientFiles", "weinre", "active"], true); + }, {silent: true}); + + + // Let the UI know about it + socket.emit("cp:weinre:enabled", _debugger); + + var fileitem = { + type: "js", + src: ui.getOptionIn([WEINRE_NAME, "targetUrl"]), + id: WEINRE_ELEM_ID + }; + + // Add the element to all clients + ui.addElement(clients, fileitem); + + // Save for page refreshes + //clientScripts = clientScripts.set("weinre", fileitem); + + } else { + + // Stop it + disableWeinre(ui, bs); + + //clientScripts = clientScripts.remove("weinre"); + + // Reset the state + ui.setOptionIn([WEINRE_NAME, "active"], false, {silent: false}); // Force a reload here + ui.setOptionIn(["clientFiles", "weinre", "active"], false); // Force a reload here + + // Let the UI know + socket.emit("cp:weinre:disabled"); + + // Reload all browsers to remove weinre elements/JS + clients.emit("browser:reload"); + + } +} + +/** + * Enable the debugger + * @param ui + * @param bs + * @returns {{url: string, port: number}} + */ +function enableWeinre (ui, bs) { + + if (weinreApp) { + weinreApp.close(); + weinreApp = false; + } + + var port = ui.getOptionIn([WEINRE_NAME, "port"]); + + var logger = require(path.resolve(__dirname, "../../../node_modules", "weinre", "lib", "utils.js")); + + logger.log = function (message) { + ui.logger.debug("[weinre]: %s", message); + }; + + var weinre = require("weinre"); + var external = getHostUrl(ui, bs); + + weinreApp = weinre.run({ + httpPort: port, + boundHost: external.hostname, + verbose: false, + debug: false, + readTimeout: 5, + deathTimeout: 15 }); + + return ui.options.get(WEINRE_NAME).toJS(); +} + +/** + * @param ui + * @param bs + * @returns {any|*} + */ +function disableWeinre (ui, bs) { + if (weinreApp) { + weinreApp.close(); + weinreApp = false; + } + return ui.options.get(WEINRE_NAME).toJS(); +} + +module.exports.init = init; +module.exports.toggleWeinre = toggleWeinre; \ No newline at end of file