npm - @percy/dom - Versions diffs - 1.19.1-alpha.0 → 1.19.2 - Mend

@percy/dom 1.19.1-alpha.0 → 1.19.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -37,6 +37,7 @@ const domSnapshot = await page.evaluate(() => PercyDOM.serialize(options))
 - `enableJavaScript` — When true, does not serialize some DOM elements
 - `domTransformation` — Function to transform the DOM after serialization
+- `disableShadowDOM` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
 ## Serialized Content

package/dist/bundle.js CHANGED Viewed

@@ -10,7 +10,8 @@
     function serializeInputElements(_ref) {
       let {
         dom,
-        clone
+        clone,
+        warnings
       } = _ref;
       for (let elem of dom.querySelectorAll('input, textarea, select')) {
         let inputId = elem.getAttribute('data-percy-element-id');
@@ -39,23 +40,12 @@
             cloneEl.setAttribute('value', elem.value);
         }
       }
-      // find inputs inside shadow host and recursively serialize them.
-      for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-        let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-        let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-        if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-          serializeInputElements({
-            dom: shadowHost.shadowRoot,
-            clone: cloneShadowHost.shadowRoot
-          });
-        }
-      }
     }
     // Adds a `<base>` element to the serialized iframe's `<head>`. This is necessary when
     // embedded documents are serialized and their contents become root-relative.
     function setBaseURI(dom) {
+      /* istanbul ignore if: sanity check */
       if (!new URL(dom.baseURI).hostname) return;
       let $base = document.createElement('base');
       $base.href = dom.baseURI;
@@ -69,7 +59,8 @@
         clone,
         warnings,
         resources,
-        enableJavaScript
+        enableJavaScript,
+        disableShadowDOM
       } = _ref;
       for (let frame of dom.querySelectorAll('iframe')) {
         var _clone$head;
@@ -94,7 +85,8 @@
           let serialized = serializeDOM({
             domTransformation: setBaseURI,
             dom: frame.contentDocument,
-            enableJavaScript
+            enableJavaScript,
+            disableShadowDOM
           });
           // append serialized warnings and resources
@@ -112,19 +104,61 @@
           cloneEl.remove();
         }
       }
+    }
-      // find iframes inside shadow host and recursively serialize them.
-      for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-        let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-        let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-        if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-          serializeFrames({
-            dom: shadowHost.shadowRoot,
-            clone: cloneShadowHost.shadowRoot,
-            warnings,
-            resources,
-            enableJavaScript
-          });
+    // Creates a resource object from an element's unique ID and data URL
+    function resourceFromDataURL(uid, dataURL) {
+      // split dataURL into desired parts
+      let [data, content] = dataURL.split(',');
+      let [, mimetype] = data.split(':');
+      [mimetype] = mimetype.split(';');
+      // build a URL for the serialized asset
+      let [, ext] = mimetype.split('/');
+      let path = `/__serialized__/${uid}.${ext}`;
+      let url = new URL(path, document.URL).toString();
+      // return the url, base64 content, and mimetype
+      return {
+        url,
+        content,
+        mimetype
+      };
+    }
+    function resourceFromText(uid, mimetype, data) {
+      // build a URL for the serialized asset
+      let [, ext] = mimetype.split('/');
+      let path = `/__serialized__/${uid}.${ext}`;
+      let url = new URL(path, document.URL).toString();
+      // converts text to base64
+      let content = window.btoa(data);
+      // return the url, base64 content, and mimetype
+      return {
+        url,
+        content,
+        mimetype
+      };
+    }
+    // Returns a mostly random uid.
+    function uid() {
+      return `_${Math.random().toString(36).substr(2, 9)}`;
+    }
+    function markElement(domElement, disableShadowDOM) {
+      var _domElement$tagName;
+      // Mark elements that are to be serialized later with a data attribute.
+      if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) {
+        if (!domElement.getAttribute('data-percy-element-id')) {
+          domElement.setAttribute('data-percy-element-id', uid());
+        }
+      }
+      // add special marker for shadow host
+      if (!disableShadowDOM && domElement.shadowRoot) {
+        domElement.setAttribute('data-percy-shadow-host', '');
+        if (!domElement.getAttribute('data-percy-element-id')) {
+          domElement.setAttribute('data-percy-element-id', uid());
         }
       }
     }
@@ -145,24 +179,35 @@
       }
       return true;
     }
-    // Outputs in-memory CSSOM into their respective DOM nodes.
+    function styleSheetFromNode(node) {
+      /* istanbul ignore if: sanity check */
+      if (node.sheet) return node.sheet;
+      // Cloned style nodes don't have a sheet instance unless they are within
+      // a document; we get it by temporarily adding the rules to DOM
+      const tempStyle = document.createElement('style');
+      tempStyle.setAttribute('data-percy-style-helper', '');
+      tempStyle.innerHTML = node.innerHTML;
+      const clone = document.cloneNode();
+      clone.appendChild(tempStyle);
+      const sheet = tempStyle.sheet;
+      // Cleanup node
+      tempStyle.remove();
+      return sheet;
+    }
     function serializeCSSOM(_ref) {
       let {
         dom,
         clone,
-        warnings
+        resources,
+        cache
       } = _ref;
+      // in-memory CSSOM into their respective DOM nodes.
       for (let styleSheet of dom.styleSheets) {
         if (isCSSOM(styleSheet)) {
           let styleId = styleSheet.ownerNode.getAttribute('data-percy-element-id');
-          if (!styleId) {
-            let attributes = Array.from(styleSheet.ownerNode.attributes).map(attr => `${attr.name}: ${attr.value}`);
-            warnings.add(`stylesheet with attributes - [ ${attributes} ] - was not serialized`);
-            continue;
-          }
           let cloneOwnerNode = clone.querySelector(`[data-percy-element-id="${styleId}"]`);
-          if (styleSheetsMatch(styleSheet, cloneOwnerNode.sheet)) continue;
+          if (styleSheetsMatch(styleSheet, styleSheetFromNode(cloneOwnerNode))) continue;
           let style = document.createElement('style');
           style.type = 'text/css';
           style.setAttribute('data-percy-element-id', styleId);
@@ -173,39 +218,30 @@
         }
       }
-      // find stylesheets inside shadow host and recursively serialize them.
-      for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-        let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-        let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-        if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-          serializeCSSOM({
-            dom: shadowHost.shadowRoot,
-            clone: cloneShadowHost.shadowRoot
-          });
+      // clone Adopted Stylesheets
+      // Regarding ordering of the adopted stylesheets - https://github.com/WICG/construct-stylesheets/issues/93
+      for (let sheet of dom.adoptedStyleSheets) {
+        const styleLink = document.createElement('link');
+        styleLink.setAttribute('rel', 'stylesheet');
+        if (!cache.has(sheet)) {
+          const styles = Array.from(sheet.cssRules).map(cssRule => cssRule.cssText).join('\n');
+          let resource = resourceFromText(uid(), 'text/css', styles);
+          resources.add(resource);
+          cache.set(sheet, resource.url);
+        }
+        styleLink.setAttribute('data-percy-adopted-stylesheets-serialized', 'true');
+        styleLink.setAttribute('data-percy-serialized-attribute-href', cache.get(sheet));
+        /* 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);
+        } else if (clone.constructor.name === 'ShadowRoot') {
+          clone.prepend(styleLink);
         }
       }
     }
-    // Creates a resource object from an element's unique ID and data URL
-    function resourceFromDataURL(uid, dataURL) {
-      // split dataURL into desired parts
-      let [data, content] = dataURL.split(',');
-      let [, mimetype] = data.split(':');
-      [mimetype] = mimetype.split(';');
-      // build a URL for the serialized asset
-      let [, ext] = mimetype.split('/');
-      let path = `/__serialized__/${uid}.${ext}`;
-      let url = new URL(path, document.URL).toString();
-      // return the url, base64 content, and mimetype
-      return {
-        url,
-        content,
-        mimetype
-      };
-    }
     // Serialize in-memory canvas elements into images.
     function serializeCanvas(_ref) {
       let {
@@ -228,7 +264,6 @@
         resources.add(resource);
         // create an image element in the cloned dom
-        // TODO: this works, verify if this is fine?
         let img = document.createElement('img');
         // use a data attribute to avoid making a real request
         img.setAttribute('data-percy-serialized-attribute-src', resource.url);
@@ -257,19 +292,6 @@
         }
         cloneEl.remove();
       }
-      // find canvas inside shadow host and recursively serialize them.
-      for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-        let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-        let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-        if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-          serializeCanvas({
-            dom: shadowHost.shadowRoot,
-            clone: cloneShadowHost.shadowRoot,
-            resources
-          });
-        }
-      }
     }
     // Captures the current frame of videos and sets the poster image
@@ -306,44 +328,6 @@
         // use a data attribute to avoid making a real request
         cloneEl.setAttribute('data-percy-serialized-attribute-poster', resource.url);
       }
-      // find video inside shadow host and recursively serialize them.
-      for (let shadowHost of dom.querySelectorAll('[data-percy-shadow-host]')) {
-        let percyElementId = shadowHost.getAttribute('data-percy-element-id');
-        let cloneShadowHost = clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
-        if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
-          serializeVideos({
-            dom: shadowHost.shadowRoot,
-            clone: cloneShadowHost.shadowRoot,
-            resources,
-            warnings
-          });
-        }
-      }
-    }
-    // Returns a mostly random uid.
-    function uid() {
-      return `_${Math.random().toString(36).substr(2, 9)}`;
-    }
-    function markElement(domElement) {
-      var _domElement$tagName;
-      // Mark elements that are to be serialized later with a data attribute.
-      if (['input', 'textarea', 'select', 'iframe', 'canvas', 'video', 'style'].includes((_domElement$tagName = domElement.tagName) === null || _domElement$tagName === void 0 ? void 0 : _domElement$tagName.toLowerCase())) {
-        if (!domElement.getAttribute('data-percy-element-id')) {
-          domElement.setAttribute('data-percy-element-id', uid());
-        }
-      }
-      // add special marker for shadow host
-      if (domElement.shadowRoot) {
-        if (!domElement.getAttribute('data-percy-shadow-host')) {
-          domElement.setAttribute('data-percy-shadow-host', '');
-        }
-        if (!domElement.getAttribute('data-percy-element-id')) {
-          domElement.setAttribute('data-percy-element-id', uid());
-        }
-      }
     }
     /**
@@ -353,7 +337,7 @@
      */
     // returns document fragment
-    const deepClone = host => {
+    const deepClone = (host, disableShadowDOM) => {
       // clones shadow DOM and light DOM for a given node
       let cloneNode = (node, parent) => {
         let walkTree = (nextn, nextp) => {
@@ -364,12 +348,12 @@
         };
         // mark the node before cloning
-        markElement(node);
+        markElement(node, disableShadowDOM);
         let clone = node.cloneNode();
         parent.appendChild(clone);
         // clone shadow DOM
-        if (node.shadowRoot) {
+        if (node.shadowRoot && !disableShadowDOM) {
           // create shadowRoot
           if (clone.shadowRoot) {
             // it may be set up in a custom element's constructor
@@ -379,15 +363,6 @@
               mode: 'open'
             });
           }
-          // clone stylesheets in shadowRoot
-          for (let sheet of node.shadowRoot.adoptedStyleSheets) {
-            let cssText = Array.from(sheet.rules).map(rule => rule.cssText).join('\n');
-            let style = document.createElement('style');
-            style.appendChild(document.createTextNode(cssText));
-            clone.shadowRoot.prepend(style);
-          }
           // clone dom elements
           walkTree(node.shadowRoot.firstChild, clone.shadowRoot);
         }
@@ -403,13 +378,12 @@
     /**
      * Deep clone a document while also preserving shadow roots and converting adoptedStylesheets to <style> tags.
      */
-    const cloneNodeAndShadow = doc => {
-      let mockDocumentFragment = deepClone(doc.documentElement);
-      // convert document fragment to document object
-      let cloneDocument = doc.cloneNode();
-      // dissolve document fragment in clone document
-      cloneDocument.appendChild(mockDocumentFragment);
-      return cloneDocument;
+    const cloneNodeAndShadow = ctx => {
+      let cloneDocumentFragment = deepClone(ctx.dom.documentElement, ctx.disableShadowDOM);
+      cloneDocumentFragment.documentElement = cloneDocumentFragment.firstChild;
+      cloneDocumentFragment.head = cloneDocumentFragment.querySelector('head');
+      cloneDocumentFragment.body = cloneDocumentFragment.querySelector('body');
+      return cloneDocumentFragment;
     };
     /**
@@ -432,7 +406,7 @@
     // Since only chromium currently supports declarative shadow DOM - https://caniuse.com/declarative-shadow-dom
     function injectDeclarativeShadowDOMPolyfill(ctx) {
       let clone = ctx.clone;
-      let scriptEl = clone.createElement('script');
+      let scriptEl = document.createElement('script');
       scriptEl.setAttribute('id', '__percy_shadowdom_helper');
       scriptEl.setAttribute('data-percy-injected', true);
       scriptEl.innerHTML = `
@@ -453,7 +427,9 @@
         document.addEventListener("DOMContentLoaded", () => reversePolyFill());
       }
     `.replace(/(\n|\s{2}|\t)/g, '');
-      clone.body.appendChild(scriptEl);
+      // run polyfill as first thing post dom content is loaded
+      clone.head.prepend(scriptEl);
     }
     // Returns a copy or new doctype for a document.
@@ -482,6 +458,28 @@
       // include the doctype with the html string
       return doctype(ctx.dom) + html;
     }
+    function serializeElements(ctx) {
+      serializeInputElements(ctx);
+      serializeFrames(ctx);
+      serializeVideos(ctx);
+      if (!ctx.enableJavaScript) {
+        serializeCSSOM(ctx);
+        serializeCanvas(ctx);
+      }
+      for (const shadowHost of ctx.dom.querySelectorAll('[data-percy-shadow-host]')) {
+        let percyElementId = shadowHost.getAttribute('data-percy-element-id');
+        let cloneShadowHost = ctx.clone.querySelector(`[data-percy-element-id="${percyElementId}"]`);
+        if (shadowHost.shadowRoot && cloneShadowHost.shadowRoot) {
+          serializeElements({
+            ...ctx,
+            dom: shadowHost.shadowRoot,
+            clone: cloneShadowHost.shadowRoot
+          });
+        } else {
+          ctx.warnings.add('data-percy-shadow-host does not have shadowRoot');
+        }
+      }
+    }
     // Serializes a document and returns the resulting DOM string.
     function serializeDOM(options) {
@@ -490,24 +488,21 @@
         // allow snake_case or camelCase
         enableJavaScript = options === null || options === void 0 ? void 0 : options.enable_javascript,
         domTransformation = options === null || options === void 0 ? void 0 : options.dom_transformation,
-        stringifyResponse = options === null || options === void 0 ? void 0 : options.stringify_response
+        stringifyResponse = options === null || options === void 0 ? void 0 : options.stringify_response,
+        disableShadowDOM = options === null || options === void 0 ? void 0 : options.disable_shadow_dom
       } = options || {};
       // keep certain records throughout serialization
       let ctx = {
         resources: new Set(),
         warnings: new Set(),
-        enableJavaScript
+        cache: new Map(),
+        enableJavaScript,
+        disableShadowDOM
       };
       ctx.dom = dom;
-      ctx.clone = cloneNodeAndShadow(ctx.dom);
-      serializeInputElements(ctx);
-      serializeFrames(ctx);
-      serializeVideos(ctx);
-      if (!enableJavaScript) {
-        serializeCSSOM(ctx);
-        serializeCanvas(ctx);
-      }
+      ctx.clone = cloneNodeAndShadow(ctx);
+      serializeElements(ctx);
       if (domTransformation) {
         try {
           domTransformation(ctx.clone.documentElement);
@@ -515,7 +510,9 @@
           console.error('Could not transform the dom:', err.message);
         }
       }
-      injectDeclarativeShadowDOMPolyfill(ctx);
+      if (!disableShadowDOM) {
+        injectDeclarativeShadowDOMPolyfill(ctx);
+      }
       let result = {
         html: serializeHTML(ctx),
         warnings: Array.from(ctx.warnings),

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.19.1-alpha.0",
+  "version": "1.19.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,5 +34,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "1a95e827ef2fb7e6f2c7a7a5a90d265185f31fc2"
+  "gitHead": "609ae53aa84ab2f7054a21214b36dccd71025780"
 }