From d4f1ef9f433c82cca43ba1b452fc9339286e0ef2 Mon Sep 17 00:00:00 2001 From: Michael Spyratos Date: Sun, 11 Aug 2024 02:38:35 -0400 Subject: [PATCH 1/2] fix: support for srcset properties --- .gitignore | 1 + index.js | 27 +++++++++++++--- lib/srcset.js | 10 ++++++ test/test.js | 47 ++++++++++++++++++++++++++-- test/with-inline-requires.handlebars | 5 +++ 5 files changed, 83 insertions(+), 7 deletions(-) create mode 100644 lib/srcset.js diff --git a/.gitignore b/.gitignore index 71daf201c..fed322b0d 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 48a6817b9..0c9535c2b 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 000000000..85ab0400b --- /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 97e2c5dd5..150c74885 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 21a589122..d8061c210 100644 --- a/test/with-inline-requires.handlebars +++ b/test/with-inline-requires.handlebars @@ -1 +1,6 @@ {{image "images/path/to/image"}} + + + + + From 52424c091c6a2f846836b4f3bd5133090aace9bc Mon Sep 17 00:00:00 2001 From: Michael Spyratos Date: Sun, 11 Aug 2024 03:00:45 -0400 Subject: [PATCH 2/2] fix: space in srcset --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index 0c9535c2b..495707249 100644 --- a/index.js +++ b/index.js @@ -155,7 +155,7 @@ module.exports = function (source) { var srcsetProperty = srcsetMatch.replace(',', '').trim(); requireList.push('" + require(' + loaderUtils.stringifyRequest(loaderApi, srcsetPath) + - ') + "' + srcsetProperty); + ') + " ' + srcsetProperty); startIndex = item.index + srcsetMatch.length; });