From 53ff8dbe9c15ece0a02c542c2d6ac692c72175f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andre=CC=81=20Kesser?= Date: Tue, 23 Feb 2016 17:37:46 +0100 Subject: [PATCH 1/4] Added possibility to handle srcset --- index.js | 41 +++++++++++++++++++++++++++++------------ 1 file changed, 29 insertions(+), 12 deletions(-) diff --git a/index.js b/index.js index d751899d..504fcea9 100644 --- a/index.js +++ b/index.js @@ -26,7 +26,7 @@ function getLoaderConfig(context) { module.exports = function(content) { this.cacheable && this.cacheable(); var config = getLoaderConfig(this); - var attributes = ["img:src"]; + var attributes = ["img:src", "img:srcset"]; if(config.attrs !== undefined) { if(typeof config.attrs === "string") attributes = config.attrs.split(" "); @@ -45,20 +45,30 @@ module.exports = function(content) { var data = {}; content = [content]; links.forEach(function(link) { - if(!loaderUtils.isUrlRequest(link.value, root)) return; - - var uri = url.parse(link.value); - if (uri.hash !== null && uri.hash !== undefined) { - uri.hash = null; - link.value = uri.format(); - link.length = link.value.length; - } + var newValue = link.value.split(","); + var newValue = newValue.map(function (value) { + var valueArray = value.trim().split(" "); + var obj = { + value: valueArray.shift(), + additional: valueArray, + }; + if(!loaderUtils.isUrlRequest(obj.value, root)) return; + var uri = url.parse(obj.value); + if (uri.hash !== null && uri.hash !== undefined) { + obj.hash = uri.hash; + uri.hash = null; + obj.value = uri.format(); + } + return obj; + }); do { var ident = randomIdent(); } while(data[ident]); - data[ident] = link.value; + data[ident] = newValue; var x = content.pop(); + + content.push(x.substr(link.start + link.length)); content.push(ident); content.push(x.substr(0, link.start)); @@ -95,9 +105,16 @@ module.exports = function(content) { } else { content = JSON.stringify(content); } - return "module.exports = " + content.replace(/xxxHTMLLINKxxx[0-9\.]+xxx/g, function(match) { if(!data[match]) return match; - return '" + require(' + JSON.stringify(loaderUtils.urlToRequest(data[match], root)) + ') + "'; + return data[match].reduce(function (pV,cV, index, array) { + + var hash = cV.hash || ""; + var additional = cV.additional.length != 0 ? " " + cV.additional.join(" ") : ""; + if (index != array.length -1) { + additional += ","; + } + return pV + '" + require(' + JSON.stringify(loaderUtils.urlToRequest(cV.value, root)) + ') + "' + hash + additional; + },""); }) + ";"; } From d1edff9eed36636d86fcea15e43ceb7a0d296409 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andre=CC=81=20Kesser?= Date: Tue, 23 Feb 2016 17:46:27 +0100 Subject: [PATCH 2/4] Updated readme --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 262372ca..de6f4e3e 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,17 @@ Exports HTML as string. HTML is minimized when the compiler demands. By default every local `` is required (`require("./image.png")`). You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`). -You can specify which tag-attribute combination should be processed by this loader via the query parameter `attrs`. Pass an array or a space-separated list of `:` combinations. (Default: `attrs=img:src`) +Also every ` is converted to `require` statements. For example +``` html + +``` +is converted to +``` javascript +"" +``` + + +You can specify which tag-attribute combination should be processed by this loader via the query parameter `attrs`. Pass an array or a space-separated list of `:` combinations. (Default: `attrs=[img:src, img:srcset]`) To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in `attrs=false`. From dc1447b940cd5878f21eefdbeb50e47151489d18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andre=CC=81=20Kesser?= Date: Mon, 11 Apr 2016 19:03:45 +0200 Subject: [PATCH 3/4] Added Support for img:srcset Added support for img:secset and other comma serperated lists; img:srcset is handeled by default --- README.md | 10 +++++++++- index.js | 23 +++++++++++++++++++++-- test/loaderTest.js | 29 +++++++++++++++++++++++++---- 3 files changed, 55 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 262372ca..84402130 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,15 @@ Exports HTML as string. HTML is minimized when the compiler demands. By default every local `` is required (`require("./image.png")`). You may need to specify loaders for images in your configuration (recommended `file-loader` or `url-loader`). -You can specify which tag-attribute combination should be processed by this loader via the query parameter `attrs`. Pass an array or a space-separated list of `:` combinations. (Default: `attrs=img:src`) +Also every ` is converted to `require` statements. For example +``` html + +``` +is converted to +``` javascript +"" +``` +You can specify which tag-attribute combination should be processed by this loader via the query parameter `attrs`. Pass an array or a space-separated list of `:` combinations. (Default: `attrs=[img:src, img:srcset]`) To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in `attrs=false`. diff --git a/index.js b/index.js index d751899d..71e80a01 100644 --- a/index.js +++ b/index.js @@ -26,7 +26,7 @@ function getLoaderConfig(context) { module.exports = function(content) { this.cacheable && this.cacheable(); var config = getLoaderConfig(this); - var attributes = ["img:src"]; + var attributes = ["img:src", "img:srcset"]; if(config.attrs !== undefined) { if(typeof config.attrs === "string") attributes = config.attrs.split(" "); @@ -38,9 +38,28 @@ module.exports = function(content) { throw new Error("Invalid value to config parameter attrs"); } var root = config.root; - var links = attrParse(content, function(tag, attr) { + var rawLinks = attrParse(content, function(tag, attr) { return attributes.indexOf(tag + ":" + attr) >= 0; }); + var links = []; + rawLinks.forEach(function (link) { + var length = link.length; + var start = link.start; + var valueList = link.value.split(","); + valueList.forEach(function (newLink) { + var trimmed = newLink.trim(); + var cLength = newLink.length; + var spacePos = trimmed.indexOf(" "); + var spaceStart = newLink.indexOf(trimmed); + var len = cLength+ spaceStart; + if (-1 != spacePos) { + len = spacePos + spaceStart; + trimmed = trimmed.substring(0,spacePos); + } + links.push({start: start, length: len , value: trimmed}); + start += cLength+1; + }); + }); links.reverse(); var data = {}; content = [content]; diff --git a/test/loaderTest.js b/test/loaderTest.js index cb024368..08558dad 100644 --- a/test/loaderTest.js +++ b/test/loaderTest.js @@ -29,6 +29,27 @@ describe("loader", function() { 'module.exports = "Text