Implement support for <img srcset="..."> (#681)

* Implement support for <img srcset="..."> * Refactor HTMLAsset.collectDependencies to reduce code duplication
parcel-bundler · Jan 30, 2018 · 29ac70b · 29ac70b
1 parent 9310641
commit 29ac70b
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 7 deletions.
diff --git a/src/assets/HTMLAsset.js b/src/assets/HTMLAsset.js
@@ -38,23 +38,41 @@ class HTMLAsset extends Asset {
     return res;
   }
 
+  processSingleDependency(path) {
+    let assetPath = this.addURLDependency(decodeURIComponent(path));
+    if (!isURL(assetPath)) {
+      assetPath = urlJoin(this.options.publicURL, assetPath);
+    }
+    return assetPath;
+  }
+
+  collectSrcSetDependencies(srcset) {
+    const newSources = [];
+    for (const source of srcset.split(',')) {
+      const pair = source.trim().split(' ');
+      if (pair.length === 0) continue;
+      pair[0] = this.processSingleDependency(pair[0]);
+      newSources.push(pair.join(' '));
+    }
+    return newSources.join(',');
+  }
+
   collectDependencies() {
     this.ast.walk(node => {
       if (node.attrs) {
         for (let attr in node.attrs) {
+          if (node.tag === 'img' && attr === 'srcset') {
+            node.attrs[attr] = this.collectSrcSetDependencies(node.attrs[attr]);
+            this.isAstDirty = true;
+            continue;
+          }
           let elements = ATTRS[attr];
           // Check for virtual paths
           if (node.tag === 'a' && node.attrs[attr].lastIndexOf('.') < 1) {
             continue;
           }
           if (elements && elements.includes(node.tag)) {
-            let assetPath = this.addURLDependency(
-              decodeURIComponent(node.attrs[attr])
-            );
-            if (!isURL(assetPath)) {
-              assetPath = urlJoin(this.options.publicURL, assetPath);
-            }
-            node.attrs[attr] = assetPath;
+            node.attrs[attr] = this.processSingleDependency(node.attrs[attr]);
             this.isAstDirty = true;
           }
         }

diff --git a/test/html.js b/test/html.js
@@ -438,4 +438,30 @@ describe('html', function() {
       ]
     });
   });
+
+  it('Should detect srcset attribute', async function() {
+    let b = await bundle(__dirname + '/integration/html-srcset/index.html');
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html'],
+      childBundles: [
+        {
+          type: 'png',
+          assets: ['100x100.png'],
+          childBundles: []
+        },
+        {
+          type: 'png',
+          assets: ['200x200.png'],
+          childBundles: []
+        },
+        {
+          type: 'png',
+          assets: ['300x300.png'],
+          childBundles: []
+        }
+      ]
+    });
+  });
 });
diff --git a/test/integration/html-srcset/100x100.png b/test/integration/html-srcset/100x100.png
diff --git a/test/integration/html-srcset/200x200.png b/test/integration/html-srcset/200x200.png
diff --git a/test/integration/html-srcset/300x300.png b/test/integration/html-srcset/300x300.png
diff --git a/test/integration/html-srcset/index.html b/test/integration/html-srcset/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+</head>
+<body>
+<img src="100x100.png" srcset="200x200.png 250w, 300x300.png 500w">
+</body>
+</html>