@percy/dom 1.14.0 → 1.15.0

package/dist/bundle.js

@@ -18,10 +18,15 @@
           elem.setAttribute('data-percy-element-id', uid());
         }
       }
+      return dom;
     }
 
     // Translates JavaScript properties of inputs into DOM attributes.
-    function serializeInputElements(dom, clone) {
+    function serializeInputElements(_ref) {
+      let {
+        dom,
+        clone
+      } = _ref;
       for (let elem of dom.querySelectorAll('input, textarea, select')) {
         let inputId = elem.getAttribute('data-percy-element-id');
         let cloneEl = clone.querySelector(`[data-percy-element-id="${inputId}"]`);
@@ -61,8 +66,12 @@
     }
 
     // Recursively serializes iframe documents into srcdoc attributes.
-    function serializeFrames(dom, clone, _ref) {
+    function serializeFrames(_ref) {
       let {
+        dom,
+        clone,
+        warnings,
+        resources,
         enableJavaScript
       } = _ref;
       for (let frame of dom.querySelectorAll('iframe')) {
@@ -90,8 +99,13 @@
             enableJavaScript
           });
 
-          // assign to srcdoc and remove src
-          cloneEl.setAttribute('srcdoc', serialized);
+          // append serialized warnings and resources
+          /* istanbul ignore next: warnings not implemented yet */
+          for (let w of serialized.warnings) warnings.add(w);
+          for (let r of serialized.resources) resources.add(r);
+
+          // assign serialized html to srcdoc and remove src
+          cloneEl.setAttribute('srcdoc', serialized.html);
           cloneEl.removeAttribute('src');
 
           // delete inaccessible frames built with js when js is disabled because they
@@ -120,7 +134,11 @@
     }
 
     // Outputs in-memory CSSOM into their respective DOM nodes.
-    function serializeCSSOM(dom, clone) {
+    function serializeCSSOM(_ref) {
+      let {
+        dom,
+        clone
+      } = _ref;
       for (let styleSheet of dom.styleSheets) {
         if (isCSSOM(styleSheet)) {
           let styleId = styleSheet.ownerNode.getAttribute('data-percy-element-id');
@@ -137,8 +155,33 @@
       }
     }
 
+    // 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(dom, clone) {
+    function serializeCanvas(_ref) {
+      let {
+        dom,
+        clone,
+        resources
+      } = _ref;
       for (let canvas of dom.querySelectorAll('canvas')) {
         // Note: the `.toDataURL` API requires WebGL canvas elements to use
         // `preserveDrawingBuffer: true`. This is because `.toDataURL` uses the
@@ -148,9 +191,15 @@
         // skip empty canvases
         if (!dataUrl || dataUrl === 'data:,') continue;
 
+        // get the element's percy id and create a resource for it
+        let percyElementId = canvas.getAttribute('data-percy-element-id');
+        let resource = resourceFromDataURL(percyElementId, dataUrl);
+        resources.add(resource);
+
         // create an image element in the cloned dom
         let img = clone.createElement('img');
-        img.src = dataUrl;
+        // use a data attribute to avoid making a real request
+        img.setAttribute('data-percy-serialized-attribute-src', resource.url);
 
         // copy canvas element attributes to the image element such as style, class,
         // or data attributes that may be targeted by CSS
@@ -167,7 +216,6 @@
         img.style.maxWidth = img.style.maxWidth || '100%';
 
         // insert the image into the cloned DOM and remove the cloned canvas element
-        let percyElementId = canvas.getAttribute('data-percy-element-id');
         let cloneEl = clone.querySelector(`[data-percy-element-id=${percyElementId}]`);
         cloneEl.parentElement.insertBefore(img, cloneEl);
         cloneEl.remove();
@@ -175,9 +223,14 @@
     }
 
     // Captures the current frame of videos and sets the poster image
-    function serializeVideos(dom, clone) {
+    function serializeVideos(_ref) {
+      let {
+        dom,
+        clone,
+        resources
+      } = _ref;
       for (let video of dom.querySelectorAll('video')) {
-        // If the video already has a poster image, no work for us to do
+        // if the video already has a poster image, no work for us to do
         if (video.getAttribute('poster')) continue;
         let videoId = video.getAttribute('data-percy-element-id');
         let cloneEl = clone.querySelector(`[data-percy-element-id="${videoId}"]`);
@@ -190,9 +243,15 @@
           dataUrl = canvas.toDataURL();
         } catch {}
 
-        // If the canvas produces a blank image, skip
+        // if the canvas produces a blank image, skip
         if (!dataUrl || dataUrl === 'data:,') continue;
-        cloneEl.setAttribute('poster', dataUrl);
+
+        // create a resource from the serialized data url
+        let resource = resourceFromDataURL(videoId, dataUrl);
+        resources.add(resource);
+
+        // use a data attribute to avoid making a real request
+        cloneEl.setAttribute('data-percy-serialized-attribute-poster', resource.url);
       }
     }
 
@@ -214,34 +273,53 @@
       return `<!DOCTYPE ${name}${deprecated}>`;
     }
 
+    // Serializes and returns the cloned DOM as an HTML string
+    function serializeHTML(ctx) {
+      let html = ctx.clone.documentElement.outerHTML;
+      // replace serialized data attributes with real attributes
+      html = html.replace(/ data-percy-serialized-attribute-(\w+?)=/ig, ' $1=');
+      // include the doctype with the html string
+      return doctype(ctx.dom) + html;
+    }
+
     // Serializes a document and returns the resulting DOM string.
     function serializeDOM(options) {
       let {
         dom = document,
         // 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
+        domTransformation = options === null || options === void 0 ? void 0 : options.dom_transformation,
+        stringifyResponse = options === null || options === void 0 ? void 0 : options.stringify_response
       } = options || {};
-      prepareDOM(dom);
-      let clone = dom.cloneNode(true);
-      serializeInputElements(dom, clone);
-      serializeFrames(dom, clone, {
+
+      // keep certain records throughout serialization
+      let ctx = {
+        resources: new Set(),
+        warnings: new Set(),
         enableJavaScript
-      });
-      serializeVideos(dom, clone);
+      };
+      ctx.dom = prepareDOM(dom);
+      ctx.clone = ctx.dom.cloneNode(true);
+      serializeInputElements(ctx);
+      serializeFrames(ctx);
+      serializeVideos(ctx);
       if (!enableJavaScript) {
-        serializeCSSOM(dom, clone);
-        serializeCanvas(dom, clone);
+        serializeCSSOM(ctx);
+        serializeCanvas(ctx);
       }
-      let doc = clone.documentElement;
       if (domTransformation) {
         try {
-          domTransformation(doc);
+          domTransformation(ctx.clone.documentElement);
         } catch (err) {
           console.error('Could not transform the dom:', err.message);
         }
       }
-      return doctype(dom) + doc.outerHTML;
+      let result = {
+        html: serializeHTML(ctx),
+        warnings: Array.from(ctx.warnings),
+        resources: Array.from(ctx.resources)
+      };
+      return stringifyResponse ? JSON.stringify(result) : result;
     }
 
     exports["default"] = serializeDOM;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,5 +34,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "fd72688e449d6dd3eafd346fc07879cb3bb01a4e"
+  "gitHead": "383ce2888d2e4fe6972368f9bbe8580b23431a98"
 }