@percy/dom 1.31.0-alpha.3 → 1.31.0

package/dist/bundle.js

@@ -314,9 +314,21 @@
           /* istanbul ignore next: tested, but coverage is stripped */
           if (clone.constructor.name === 'HTMLDocument' || clone.constructor.name === 'DocumentFragment') {
             // handle document and iframe
-            clone.body.prepend(styleLink);
+            // We are checking if we have multiple stylesheets present for the same clone or clone.body then we add
+            // them in the same order in which we receive them.
+            const lastLink = clone.body.querySelector('link[data-percy-adopted-stylesheets-serialized]:last-of-type');
+            if (lastLink) {
+              lastLink.after(styleLink);
+            } else {
+              clone.body.prepend(styleLink);
+            }
           } else if (clone.constructor.name === 'ShadowRoot') {
-            clone.prepend(styleLink);
+            const lastLink = clone.querySelector('link[data-percy-adopted-stylesheets-serialized]:last-of-type');
+            if (lastLink) {
+              lastLink.after(styleLink);
+            } else {
+              clone.prepend(styleLink);
+            }
           }
         }
       } else {
@@ -441,7 +453,7 @@
       base64Index += ';base64,'.length;
       return src.substring(base64Index);
     }
-    function serializeBase64(node, resources) {
+    function serializeBase64(node, resources, cache) {
       let src = node.src;
       let isHrefUsed = false;
 
@@ -455,14 +467,28 @@
       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 (!cache.has(base64String)) {
+        // create a resource from the serialized data url
+        let resource = resourceFromText(uid(), mimetype, base64String);
+        resources.add(resource);
+        cache.set(base64String, resource.url);
+      }
       if (isHrefUsed === true) {
-        node.href.baseVal = resource.url;
+        if (node.hasAttribute('xlink:href')) {
+          node.removeAttribute('xlink:href');
+          node.setAttribute('data-percy-serialized-attribute-xlink:href', cache.get(base64String));
+        } else {
+          node.removeAttribute('href');
+          node.setAttribute('data-percy-serialized-attribute-href', cache.get(base64String));
+        }
       } else {
-        node.src = resource.url;
+        // we use data-percy-serialized-attribute-src here instead of `src`.
+        // As soon as src is used the browser will try to load the resource,
+        // thus making a network call which would fail as this is a
+        // dynamic cached resource and not a resource that backend can serve.
+        // we later post converting domtree to html replace this with src
+        node.removeAttribute('src');
+        node.setAttribute('data-percy-serialized-attribute-src', cache.get(base64String));
       }
     }
 
@@ -478,11 +504,36 @@
      */
 
     const ignoreTags = ['NOSCRIPT'];
+
+    /**
+     * if a custom element has attribute callback then cloneNode calls a callback that can
+     * increase CPU load or some other change.
+     * So we want to make sure that it is not called when doing serialization.
+    */
+    function cloneElementWithoutLifecycle(element) {
+      if (!element.attributeChangedCallback || !element.tagName.includes('-')) {
+        return element.cloneNode(); // Standard clone for non-custom elements
+      }
+      const cloned = document.createElement('data-percy-custom-element-' + element.tagName);
+
+      // Clone attributes without triggering attributeChangedCallback
+      for (const attr of element.attributes) {
+        // handle src separately
+        if (attr.name.toLowerCase() === 'src') {
+          cloned.setAttribute('data-percy-serialized-attribute-src', attr.value);
+        } else {
+          cloned.setAttribute(attr.name, attr.value);
+        }
+      }
+      return cloned;
+    }
     function cloneNodeAndShadow(ctx) {
       let {
         dom,
         disableShadowDOM,
-        resources
+        resources,
+        cache,
+        enableJavaScript
       } = ctx;
       // clones shadow DOM and light DOM for a given node
       let cloneNode = (node, parent) => {
@@ -498,15 +549,36 @@
 
           // mark the node before cloning
           markElement(node, disableShadowDOM);
-          let clone = node.cloneNode();
+          let clone = cloneElementWithoutLifecycle(node);
+
+          // Handle <style> tag specifically for media queries
+          if (node.nodeName === 'STYLE' && !enableJavaScript) {
+            var _node$textContent;
+            let cssText = ((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.trim()) || '';
+            if (!cssText && node.sheet) {
+              try {
+                const cssRules = node.sheet.cssRules;
+                if (cssRules && cssRules.length > 0) {
+                  cssText = Array.from(cssRules).map(rule => rule.cssText).join('\n');
+                }
+              } catch (_) {
+                // ignore errors
+              }
+            }
+            if (cssText) {
+              clone.textContent = cssText;
+              clone.setAttribute('data-percy-cssom-serialized', 'true');
+            }
+          }
 
           // We apply any element transformations here to avoid another treeWalk
           applyElementTransformations(clone);
-          serializeBase64(clone, resources);
+          serializeBase64(clone, resources, cache);
           parent.appendChild(clone);
 
           // shallow clone should not contain children
           if (clone.children) {
+            /* istanbul ignore next */
             Array.from(clone.children).forEach(child => clone.removeChild(child));
           }
 
@@ -598,6 +670,8 @@
       let html = getOuterHTML(ctx.clone.documentElement, {
         shadowRootElements: ctx.shadowRootElements
       });
+      // this is replacing serialized data tag with real tag
+      html = html.replace(/(<\/?)data-percy-custom-element-/g, '$1');
       // replace serialized data attributes with real attributes
       html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
       // include the doctype with the html string
@@ -647,6 +721,7 @@
 
     // Serializes a document and returns the resulting DOM string.
     function serializeDOM(options) {
+      var _ctx$clone$body;
       let {
         dom = document,
         // allow snake_case or camelCase
@@ -687,7 +762,7 @@
           let sibling = clonedBody.nextSibling;
           clonedBody.append(sibling);
         }
-      } else if (ctx.clone.body.nextSibling) {
+      } else if ((_ctx$clone$body = ctx.clone.body) !== null && _ctx$clone$body !== void 0 && _ctx$clone$body.nextSibling) {
         ctx.hints.add('DOM elements found outside </body>');
       }
       let cookies = '';

package/package.json

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