Support of srcset with inlineRequires

.gitignore

@@ -6,3 +6,4 @@ example/dist/
 obj/
 .ntvs_analysis.dat.tmp
 coverage
+/.idea

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);

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,
+};

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'));
+    })
+  });
 });

test/with-inline-requires.handlebars

@@ -1 +1,6 @@
 {{image "images/path/to/image"}}
+
+<img src="images/path/to/image" srcset="images/path/to/200/image 200w" />
+
+<img src="images/path/to/image" srcset="images/path/to/200/image 200w, images/path/to/400/image 400w, images/path/to/2x/image 2x" />
+