From 06180ae6e56547c02a3d5875f2dde23b1a9b1fac Mon Sep 17 00:00:00 2001 From: mpfau Date: Thu, 7 Jan 2016 21:02:29 +0100 Subject: [PATCH 1/4] added hot reloading capabilities --- index.js | 41 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index d0c9346..0f80308 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,25 @@ var inBrowser = typeof window !== "undefined"; if (inBrowser) { + + // map that assigns an import to a set of modules that must be refreshed when that import is updated + var importToModules = {} + // register with the hotReloader wich must be present at `SystemhotReloader` + if (typeof System.hotReloader !== "undefined") { + console.log("hot reload: configuring hot reload for less") + System.hotReloader.on('change', (moduleName) => { + System.normalize(moduleName).then(function(normalizedName) { + var modules = importToModules[normalizedName] + if (modules) { + return Promise.all(modules).map(function(module) { + System.delete(module) + return System.import(module) + }) + } + }) + }) + } + exports.translate = function (load) { return System.import("less/lib/less-browser") .then(function (lesscWrapper) { @@ -19,10 +38,26 @@ if (inBrowser) { // output.map = string of sourcemap // output.imports = array of string filenames of the imports referenced - var style = document.createElement('style'); - style.setAttribute('type', 'text/css'); + // add this module to the map of modules to refresh for each import + for (var i = 0; i < output.imports.length; i++) { + if (typeof importToModules[output.imports[i]] === "undefined") { + importToModules[output.imports[i]] = [load.name] + } else { + var modules = importToModules[output.imports[i]] + if (modules.indexOf(load.name) !== -1) { + modules.push(load.name) + } + } + } + + var styleId = encodeURI(load.name) + var style = document.getElementById(styleId) + if (!style) { + var style = document.createElement('style'); + style.setAttribute('type', 'text/css'); + document.getElementsByTagName('head')[0].appendChild(style); + } style.textContent = output.css; - document.getElementsByTagName('head')[0].appendChild(style); load.metadata.format = 'defined'; }); From 57092a425219a0030e42c2a35f971a471df622b6 Mon Sep 17 00:00:00 2001 From: mpfau Date: Fri, 8 Jan 2016 13:48:30 +0100 Subject: [PATCH 2/4] replaced es6 closure with function statement for es5 compability reasons --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 0f80308..033ee2e 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,7 @@ if (inBrowser) { // register with the hotReloader wich must be present at `SystemhotReloader` if (typeof System.hotReloader !== "undefined") { console.log("hot reload: configuring hot reload for less") - System.hotReloader.on('change', (moduleName) => { + System.hotReloader.on('change', function(moduleName) { System.normalize(moduleName).then(function(normalizedName) { var modules = importToModules[normalizedName] if (modules) { From 192fb59a93ece4705a35a83e86467b1d65191b7b Mon Sep 17 00:00:00 2001 From: mpfau Date: Fri, 8 Jan 2016 18:48:25 +0100 Subject: [PATCH 3/4] added missing id to script element --- index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/index.js b/index.js index 033ee2e..930c8fb 100644 --- a/index.js +++ b/index.js @@ -54,6 +54,7 @@ if (inBrowser) { var style = document.getElementById(styleId) if (!style) { var style = document.createElement('style'); + style.id = styleId style.setAttribute('type', 'text/css'); document.getElementsByTagName('head')[0].appendChild(style); } From cef75c00febe9d4ead53ea63f33aa4c3f2f5d88a Mon Sep 17 00:00:00 2001 From: mpfau Date: Sat, 9 Jan 2016 15:47:19 +0100 Subject: [PATCH 4/4] fixed bug (only add unknown modules to the import mapping) --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 930c8fb..a096581 100644 --- a/index.js +++ b/index.js @@ -44,7 +44,7 @@ if (inBrowser) { importToModules[output.imports[i]] = [load.name] } else { var modules = importToModules[output.imports[i]] - if (modules.indexOf(load.name) !== -1) { + if (modules.indexOf(load.name) === -1) { modules.push(load.name) } }