@percy/dom 1.21.0 → 1.22.0-alpha.0

package/README.md

@@ -37,7 +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.
+- `disableShadowDOMSerialization` — disable shadow DOM capturing, this option can be passed to `percySnapshot` its part of per-snapshot config.
 
 ## Serialized Content
 

package/dist/bundle.js

@@ -60,7 +60,7 @@
         warnings,
         resources,
         enableJavaScript,
-        disableShadowDOM
+        disableShadowDOMSerialization
       } = _ref;
       for (let frame of dom.querySelectorAll('iframe')) {
         var _clone$head;
@@ -86,7 +86,7 @@
             domTransformation: setBaseURI,
             dom: frame.contentDocument,
             enableJavaScript,
-            disableShadowDOM
+            disableShadowDOMSerialization
           });
 
           // append serialized warnings and resources
@@ -159,7 +159,7 @@
     function uid() {
       return `_${Math.random().toString(36).substr(2, 9)}`;
     }
-    function markElement(domElement, disableShadowDOM) {
+    function markElement(domElement, disableShadowDOMSerialization) {
       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())) {
@@ -169,7 +169,7 @@
       }
 
       // add special marker for shadow host
-      if (!disableShadowDOM && domElement.shadowRoot) {
+      if (!disableShadowDOMSerialization && domElement.shadowRoot) {
         domElement.setAttribute('data-percy-shadow-host', '');
         if (!domElement.getAttribute('data-percy-element-id')) {
           domElement.setAttribute('data-percy-element-id', uid());
@@ -341,7 +341,7 @@
     function cloneNodeAndShadow(_ref) {
       let {
         dom,
-        disableShadowDOM
+        disableShadowDOMSerialization
       } = _ref;
       // clones shadow DOM and light DOM for a given node
       let cloneNode = (node, parent) => {
@@ -353,12 +353,12 @@
         };
 
         // mark the node before cloning
-        markElement(node, disableShadowDOM);
+        markElement(node, disableShadowDOMSerialization);
         let clone = node.cloneNode();
         parent.appendChild(clone);
 
         // clone shadow DOM
-        if (node.shadowRoot && !disableShadowDOM) {
+        if (node.shadowRoot && !disableShadowDOMSerialization) {
           // create shadowRoot
           if (clone.shadowRoot) {
             // it may be set up in a custom element's constructor
@@ -386,14 +386,16 @@
     /**
      * Use `getInnerHTML()` to serialize shadow dom as <template> tags. `innerHTML` and `outerHTML` don't do this. Buzzword: "declarative shadow dom"
      */
-    function getOuterHTML(docElement) {
+    function getOuterHTML(ctx) {
+      const docElement = ctx.clone.documentElement;
       // firefox doesn't serialize shadow DOM, we're awaiting API's by firefox to become ready and are not polyfilling it.
       if (!docElement.getInnerHTML) {
         return docElement.outerHTML;
       }
       // chromium gives us declarative shadow DOM serialization API
+
       let innerHTML = docElement.getInnerHTML({
-        includeShadowRoots: true
+        includeShadowRoots: !ctx.disableShadowDOMSerialization
       });
       docElement.textContent = '';
       return docElement.outerHTML.replace('</html>', `${innerHTML}</html>`);
@@ -449,7 +451,7 @@
 
     // Serializes and returns the cloned DOM as an HTML string
     function serializeHTML(ctx) {
-      let html = getOuterHTML(ctx.clone.documentElement);
+      let html = getOuterHTML(ctx);
       // replace serialized data attributes with real attributes
       html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
       // include the doctype with the html string
@@ -486,7 +488,7 @@
         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,
-        disableShadowDOM = options === null || options === void 0 ? void 0 : options.disable_shadow_dom
+        disableShadowDOMSerialization = options === null || options === void 0 ? void 0 : options.disable_shadow_dom_serialization
       } = options || {};
 
       // keep certain records throughout serialization
@@ -495,7 +497,7 @@
         warnings: new Set(),
         cache: new Map(),
         enableJavaScript,
-        disableShadowDOM
+        disableShadowDOMSerialization
       };
       ctx.dom = dom;
       ctx.clone = cloneNodeAndShadow(ctx);
@@ -511,7 +513,7 @@
           console.error(errorMessage);
         }
       }
-      if (!disableShadowDOM) {
+      if (!disableShadowDOMSerialization) {
         injectDeclarativeShadowDOMPolyfill(ctx);
       }
       let result = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.21.0",
+  "version": "1.22.0-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,5 +34,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "44c63a3214f1fbfb0b1adcb6fcfe284a9f54d0cb"
+  "gitHead": "5928e586c401ac10840d1ec6219875526e45d100"
 }