@percy/dom 1.28.1 → 1.28.2-alpha.1

package/dist/bundle.js

@@ -369,6 +369,39 @@
       dropLoadingAttribute(domElement);
     }
 
+    let mimetype = null;
+    function getBase64Substring(src) {
+      let base64Index = src.indexOf(';base64,');
+      if (base64Index === -1) return null;
+      mimetype = src.substring(5, base64Index);
+      base64Index += ';base64,'.length;
+      return src.substring(base64Index);
+    }
+    function serializeBase64(node, resources) {
+      let src = node.src;
+      let isHrefUsed = false;
+
+      // case for SVGAnimatedString
+      if (src == null && node.href) {
+        isHrefUsed = true;
+        src = node.href.baseVal;
+      }
+      // skip if src is null
+      if (src == null) return;
+      let base64String = getBase64Substring(src.toString());
+      // skip if src is not base64
+      if (base64String == null) return;
+
+      // create a resource from the serialized data url
+      let resource = resourceFromText(uid(), mimetype, base64String);
+      resources.add(resource);
+      if (isHrefUsed === true) {
+        node.href.baseVal = resource.url;
+      } else {
+        node.src = resource.url;
+      }
+    }
+
     /**
      * Custom deep clone function that replaces Percy's current clone behavior.
      * This enables us to capture shadow DOM in snapshots. It takes advantage of `attachShadow`'s mode option set to open
@@ -384,7 +417,8 @@
     function cloneNodeAndShadow(_ref) {
       let {
         dom,
-        disableShadowDOM
+        disableShadowDOM,
+        resources
       } = _ref;
       // clones shadow DOM and light DOM for a given node
       let cloneNode = (node, parent) => {
@@ -403,6 +437,7 @@
 
         // We apply any element transformations here to avoid another treeWalk
         applyElementTransformations(clone);
+        serializeBase64(clone, resources);
         parent.appendChild(clone);
 
         // shallow clone should not contain children
@@ -598,7 +633,54 @@
       return stringifyResponse ? JSON.stringify(result) : result;
     }
 
+    function getSrcsets(dom) {
+      const links = new Set();
+      for (let img of dom.querySelectorAll('img[srcset]')) {
+        handleSrcSet(img.srcset, links);
+      }
+      for (let picture of dom.querySelectorAll('picture')) {
+        for (let source of picture.querySelectorAll('source')) {
+          handleSrcSet(source.srcset, links);
+        }
+      }
+      return Array.from(links);
+    }
+    function handleSrcSet(srcSet, links) {
+      let pattern = /,\s+/;
+
+      // We found couple of combination of srcset which needs different regex.
+      // example - https://url.com?param=a,b <--- here only separeting with , will cause incorrect capture.
+      // srcset = https://abc.com 320w,https://abc.com/a 400 <--- here srcset doesnot have space after comm.
+      if (!srcSet.match(pattern)) {
+        pattern = /,/;
+      }
+      srcSet = srcSet.split(pattern);
+      for (let src of srcSet) {
+        src = src.trim();
+        src = src.split(' ')[0];
+        links.add(getFormattedLink(src));
+      }
+    }
+    function getFormattedLink(src) {
+      const anchor = document.createElement('a');
+      anchor.href = src;
+      return anchor.href;
+    }
+    function loadAllSrcsetLinks() {
+      const allImgTags = [];
+      const links = getSrcsets(document);
+      for (const link of links) {
+        const img = document.createElement('img');
+        img.src = link;
+        allImgTags.push(img);
+      }
+      // Adding to window so GC won't abort request
+      window.allImgTags = allImgTags;
+      return allImgTags;
+    }
+
     exports["default"] = serializeDOM;
+    exports.loadAllSrcsetLinks = loadAllSrcsetLinks;
     exports.serialize = serializeDOM;
     exports.serializeDOM = serializeDOM;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.28.1",
+  "version": "1.28.2-alpha.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "latest"
+    "tag": "alpha"
   },
   "main": "dist/bundle.js",
   "browser": "dist/bundle.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "f3b0fad3c511fe9eea44eef939195a9d0310216b"
+  "gitHead": "7aa1309dad35bbae9b4114620b6d338dfc964bc6"
 }