@percy/dom 1.31.0-alpha.2 → 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));
           }
 
@@ -547,26 +619,27 @@
     /**
      * Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
      */
-    function getOuterHTML(docElement) {
-      // All major browsers in latest versions supports getHTML API to get serialized DOM
-      // https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML
-      // old firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
-      // new firefox from 128 onwards serializes it using getHTML
-      /* istanbul ignore if: Only triggered in firefox <= 128 and tests runs on latest */
-      if (!docElement.getHTML) {
-        return docElement.outerHTML;
-      }
+    function getOuterHTML(docElement, {
+      shadowRootElements
+    }) {
       // chromium gives us declarative shadow DOM serialization API
       let innerHTML = '';
       /* istanbul ignore else if: Only triggered in chrome <= 128 and tests runs on latest */
       if (docElement.getHTML) {
+        // All major browsers in latest versions supports getHTML API to get serialized DOM
+        // https://developer.mozilla.org/en-US/docs/Web/API/Element/getHTML
         innerHTML = docElement.getHTML({
-          serializableShadowRoots: true
+          serializableShadowRoots: true,
+          shadowRoots: shadowRootElements
         });
       } else if (docElement.getInnerHTML) {
         innerHTML = docElement.getInnerHTML({
           includeShadowRoots: true
         });
+      } else {
+        // old firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
+        // new firefox from 128 onwards serializes it using getHTML
+        return docElement.outerHTML;
       }
       docElement.textContent = '';
       // Note: Here we are specifically passing replacer function to avoid any replacements due to
@@ -594,7 +667,11 @@
 
     // Serializes and returns the cloned DOM as an HTML string
     function serializeHTML(ctx) {
-      let html = getOuterHTML(ctx.clone.documentElement);
+      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
@@ -612,6 +689,9 @@
         let percyElementId = shadowHost.getAttribute('data-percy-element-id');
         let cloneShadowHost = ctx.clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
         if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
+          // getHTML requires shadowRoot to be passed explicitly
+          // to serialize the shadow elements properly
+          ctx.shadowRootElements.push(cloneShadowHost.shadowRoot);
           serializeElements({
             ...ctx,
             dom: shadowHost.shadowRoot,
@@ -641,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
@@ -657,6 +738,7 @@
         warnings: new Set(),
         hints: new Set(),
         cache: new Map(),
+        shadowRootElements: [],
         enableJavaScript,
         disableShadowDOM
       };
@@ -680,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.2",
+  "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": "1c7711f564fd4a112e1e1490a772db757df0535d"
+  "gitHead": "49895470c0dfa7242881db43e293317d1fb8f8b6"
 }