diff --git a/.gitignore b/.gitignore index 71daf201..fed322b0 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ example/dist/ obj/ .ntvs_analysis.dat.tmp coverage +/.idea diff --git a/index.js b/index.js index 48a6817b..49570724 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,7 @@ var path = require("path"); var assign = require("object-assign"); var fastreplace = require("./lib/fastreplace"); var findNestedRequires = require("./lib/findNestedRequires"); +var srcset = require("./lib/srcset"); function versionCheck(hbCompiler, hbRuntime) { return ( @@ -143,11 +144,27 @@ module.exports = function (source) { if (str.indexOf && str.indexOf('"') === 0) { var replacements = findNestedRequires(str, inlineRequires); str = fastreplace(str, replacements, function (match) { - return ( - '" + require(' + - loaderUtils.stringifyRequest(loaderApi, match) + - ') + "' - ); + if (srcset.hasSrcsetProperties(match)) { + var requireList = []; + var matchList = match.matchAll(new RegExp(srcset.srcsetRegex, 'g')); + var startIndex = 0; + + Array.from(matchList).forEach(function(item) { + var srcsetMatch = item[0]; + var srcsetPath = item.input.substring(startIndex, item.index).trim(); + var srcsetProperty = srcsetMatch.replace(',', '').trim(); + requireList.push('" + require(' + + loaderUtils.stringifyRequest(loaderApi, srcsetPath) + + ') + " ' + srcsetProperty); + startIndex = item.index + srcsetMatch.length; + }); + + return requireList.join(', '); + } + + return '" + require(' + + loaderUtils.stringifyRequest(loaderApi, match) + + ') + "'; }); } return JavaScriptCompiler.prototype.appendToBuffer.apply(this, arguments); diff --git a/lib/srcset.js b/lib/srcset.js new file mode 100644 index 00000000..85ab0400 --- /dev/null +++ b/lib/srcset.js @@ -0,0 +1,10 @@ +var srcsetRegex = /(\s+\d+w($|\s*,)|\s+\d+x($|\s*,))/; + +function hasSrcsetProperties(match) { + return new RegExp(srcsetRegex).test(match); +} + +module.exports = { + srcsetRegex: srcsetRegex, + hasSrcsetProperties: hasSrcsetProperties, +}; \ No newline at end of file diff --git a/test/test.js b/test/test.js index 97e2c5dd..150c7488 100644 --- a/test/test.js +++ b/test/test.js @@ -6,6 +6,7 @@ var assert = require("assert"), sinon = require("sinon"), loader = require("../"), WebpackLoaderMock = require("./lib/WebpackLoaderMock"), + srcset = require("../lib/srcset"), TEST_TEMPLATE_DATA = { title: "Title", description: "Description", @@ -433,8 +434,10 @@ describe("handlebars-loader", function () { "./image": function (text) { return "Image URL: " + text; }, - "images/path/to/image": - "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50", + "images/path/to/image": "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50", + "images/path/to/200/image": "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50", + "images/path/to/400/image": "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50", + "images/path/to/2x/image": "http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50", }, }, function (err, output, require) { @@ -443,6 +446,18 @@ describe("handlebars-loader", function () { require.calledWith("images/path/to/image"), "should have required image path" ); + assert.ok( + require.calledWith("images/path/to/200/image"), + "should have required srcset 200w image path" + ); + assert.ok( + require.calledWith("images/path/to/400/image"), + "should have required srcset 400w image path" + ); + assert.ok( + require.calledWith("images/path/to/2x/image"), + "should have required srcset 2x image path" + ); done(); } ); @@ -787,4 +802,32 @@ describe("handlebars-loader", function () { } ); }); + + describe('srcset', function () { + it('matches src attributes on a simple image path', function () { + assert.ok(srcset.hasSrcsetProperties('image.jpg 400w')); + assert.ok(srcset.hasSrcsetProperties('image.jpg 20000w')); + assert.ok(srcset.hasSrcsetProperties('image.jpg 2x')); + assert.ok(srcset.hasSrcsetProperties('image.jpg 10x')); + assert.ok(srcset.hasSrcsetProperties('image.jpg 400w, image2.jpg 800w')); + assert.ok(srcset.hasSrcsetProperties('image.jpg 400w, image2.jpg 2x')); + assert.ok(srcset.hasSrcsetProperties('image.jpg 400w, image2.jpg 800w, image2.jpg 2x, image2.jpg 20x')); + }); + + it('should not match any src attributes', function () { + assert.equal(srcset.hasSrcsetProperties('image400w.jpg'), false); + assert.equal(srcset.hasSrcsetProperties('image 400w.jpg'), false); + assert.equal(srcset.hasSrcsetProperties('image2x.jpg'), false); + assert.equal(srcset.hasSrcsetProperties('image 2x.jpg'), false); + assert.equal(srcset.hasSrcsetProperties('image,400w.jpg'), false); + assert.equal(srcset.hasSrcsetProperties('image_400w,.jpg'), false); + }); + + it('is aware of edge case limitations', function () { + // The following should not be ok + assert.ok(srcset.hasSrcsetProperties('image 400w,.jpg')); + assert.ok(srcset.hasSrcsetProperties('image 400w ,hello.jpg')); + assert.ok(srcset.hasSrcsetProperties('image 2x ,.jpg')); + }) + }); }); diff --git a/test/with-inline-requires.handlebars b/test/with-inline-requires.handlebars index 21a58912..d8061c21 100644 --- a/test/with-inline-requires.handlebars +++ b/test/with-inline-requires.handlebars @@ -1 +1,6 @@ {{image "images/path/to/image"}} + + + + +