absolution - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,5 @@
+## 1.1.0 (2024-01-25)
+
+* Added a fix for srcset in img tag. Thanks to [Gauav Kumar](https://github.com/gkumar9891) for this contribution!
+
 ## 1.0.4 (2023-05-26)
@@ -2,0 +6,0 @@

index.js

@@ -23,3 +23,17 @@ var htmlparser = require('htmlparser2');
         if (_.has(attribs, attr) && attribs[attr].trim()) {
-          attribs[attr] = url.resolve(base, attribs[attr]);
+          if (attr === 'srcset') {
+            let strings = _.split(attribs[attr], ",");
+            
+            _.forEach(strings, function(str, index) {
+                str = str.trim();
+                strings[index] = _.replace(str, _.split(str, " ")[0], url.resolve(base, _.split(str, " ")[0]))
+            })
+
+            strings = strings.join(", ");
+            attribs[attr] = strings;
+
+          } else {
+            attribs[attr] = url.resolve(base, attribs[attr]);
+          }
+
           if (options.decorator) {
@@ -71,4 +85,4 @@ attribs[attr] = options.decorator(attribs[attr]);
 absolution.defaults = {
-  urlAttributes: [ 'href', 'src', 'action' ],
+  urlAttributes: [ 'href', 'src', 'action', 'srcset' ],
   selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ]
 };

package.json

 {
   "name": "absolution",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "absolution accepts HTML and a base URL, and returns HTML with absolute URLs. Great for generating valid RSS feeds.",
@@ -37,2 +37,2 @@ "main": "index.js",
   }
-}
+}

test/test.js

@@ -97,2 +97,72 @@ var assert = require("assert");
   });
+
+  it('should handle the srcset in img', function() {
+    const result = absolution(`<img src="cat.jpg" alt="cat" srcset="cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w">`, 'http://example.com/');
+
+    const expected = `<img src="http://example.com/cat.jpg" alt="cat" srcset="http://example.com/cat-320.jpg 320w, http://example.com/cat-640.jpg 640w, http://example.com/cat-1280.jpg 1280w" />`
+
+    assert.equal(result, expected);
+  })
+
+  it('should handle the srcset if srcset configured correct in img', function() {
+    const result = absolution(`<img src="http://example.com/cat.jpg" alt="cat" srcset="http://example.com/cat-320.jpg 320w, http://example.com/cat-640.jpg 640w, http://example.com/cat-1280.jpg 1280w" />`, 'http://example.com/');
+    const expected = `<img src="http://example.com/cat.jpg" alt="cat" srcset="http://example.com/cat-320.jpg 320w, http://example.com/cat-640.jpg 640w, http://example.com/cat-1280.jpg 1280w" />`
+
+    assert.equal(result, expected)
+  })
+
+
+  it('should handle the srcset in picture', function() {
+    const picture = `
+      <picture>
+        <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
+        <source media="(min-width:465px)" srcset="img_white_flower.jpg">
+        <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
+      </picture>
+      `;
+
+    const expected = `
+      <picture>
+        <source media="(min-width:650px)" srcset="http://example.com/img_pink_flowers.jpg" />
+        <source media="(min-width:465px)" srcset="http://example.com/img_white_flower.jpg" />
+        <img src="http://example.com/img_orange_flowers.jpg" alt="Flowers" style="width:auto;" />
+      </picture>
+      `;
+
+    const result = absolution(picture, 'http://example.com/', {
+      selfClosing: [
+        ...absolution.defaults.selfClosing,
+        'source'
+      ]
+    });
+    assert.equal(result, expected); 
+  })
+
+  it('should handle the srcset if srcset configured correct in picture', function() {
+    const picture = `
+    <picture>
+      <source media="(min-width:650px)" srcset="http://example.com/img_pink_flowers.jpg" />
+      <source media="(min-width:465px)" srcset="http://example.com/img_white_flower.jpg" />
+      <img src="http://example.com/img_orange_flowers.jpg" alt="Flowers" style="width:auto;" />
+    </picture>
+    `;
+    const expected = `
+    <picture>
+      <source media="(min-width:650px)" srcset="http://example.com/img_pink_flowers.jpg" />
+      <source media="(min-width:465px)" srcset="http://example.com/img_white_flower.jpg" />
+      <img src="http://example.com/img_orange_flowers.jpg" alt="Flowers" style="width:auto;" />
+    </picture>
+    `;
+  
+    const result = absolution(picture, 'http://example.com/', {
+        selfClosing: [
+          ...absolution.defaults.selfClosing,
+          'source'
+        ]
+    });
+    assert.equal(result, expected); 
+  })
+
 });
+
+

No alert changes

Improved metrics

Total package byte prevSize

18954

increased by22.3%

Lines of code

225

increased by41.51%

No dependency changes