@percy/dom 1.31.4 → 1.31.5-beta.1

package/dist/bundle.js

@@ -7,7 +7,7 @@
     process.env.__PERCY_BROWSERIFIED__ = true;
 
     // Creates a resource object from an element's unique ID and data URL
-    function resourceFromDataURL(uid, dataURL) {
+    function resourceFromDataURL$1(uid, dataURL) {
       // split dataURL into desired parts
       let [data, content] = dataURL.split(',');
       let [, mimetype] = data.split(':');
@@ -142,8 +142,8 @@
       (_dom$querySelector = dom.querySelector('head')) === null || _dom$querySelector === void 0 || _dom$querySelector.prepend($base);
     }
 
-    // Recursively serializes iframe documents into srcdoc attributes.
-    function serializeFrames({
+    // Recursively serializes iframe documents into srcdoc attributes (ASYNC).
+    async function serializeFrames({
       dom,
       clone,
       warnings,
@@ -170,8 +170,8 @@
           // the frame has yet to load and wasn't built with js, it is unsafe to serialize
           if (!builtWithJs && !frame.contentWindow.performance.timing.loadEventEnd) continue;
 
-          // recersively serialize contents
-          let serialized = serializeDOM({
+          // recersively serialize contents (AWAIT async call)
+          let serialized = await serializeDOM({
             domTransformation: setBaseURI,
             dom: frame.contentDocument,
             enableJavaScript,
@@ -196,7 +196,7 @@
     }
 
     // Returns a mostly random uid.
-    function uid() {
+    function uid$1() {
       return `_${Math.random().toString(36).substr(2, 9)}`;
     }
     function markElement(domElement, disableShadowDOM, forceShadowAsLightDOM) {
@@ -204,7 +204,7 @@
       // 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());
+          domElement.setAttribute('data-percy-element-id', uid$1());
         }
       }
 
@@ -215,7 +215,7 @@
           domElement.setAttribute('data-percy-shadow-host', '');
         }
         if (!domElement.getAttribute('data-percy-element-id')) {
-          domElement.setAttribute('data-percy-element-id', uid());
+          domElement.setAttribute('data-percy-element-id', uid$1());
         }
       }
     }
@@ -250,7 +250,7 @@
     }
     function createStyleResource(styleSheet) {
       const styles = Array.from(styleSheet.cssRules).map(cssRule => cssRule.cssText).join('\n');
-      let resource = resourceFromText(uid(), 'text/css', styles);
+      let resource = resourceFromText(uid$1(), 'text/css', styles);
       return resource;
     }
     function serializeCSSOM(ctx) {
@@ -374,9 +374,11 @@
       img.setAttribute('data-percy-canvas-serialized', '');
       img.setAttribute('data-percy-serialized-attribute-src', imageUrl);
 
-      // set the maxWidth only if it was set on the canvas
-      if (canvas.style.maxWidth) {
-        img.style.maxWidth = canvas.style.maxWidth;
+      // set a default max width to account for canvases that might resize with JS
+      // Check if width is "static" (fixed pixels) vs "dynamic" (%, vw, etc.)
+      const hasStaticWidth = canvas.style.width && canvas.style.width.match(/^\d+px$/);
+      if (!hasStaticWidth) {
+        img.style.maxWidth = img.style.maxWidth || '100%';
       }
 
       // insert the image into the cloned DOM and remove the cloned canvas element
@@ -414,7 +416,7 @@
           if (!dataUrl || dataUrl === 'data:,') continue;
 
           // create a resource for the canvas data
-          let resource = resourceFromDataURL(percyElementId, dataUrl);
+          let resource = resourceFromDataURL$1(percyElementId, dataUrl);
           resources.add(resource);
 
           // create and insert image element with the resource URL
@@ -465,7 +467,7 @@
           if (!dataUrl || dataUrl === 'data:,') continue;
 
           // create a resource from the serialized data url
-          let resource = resourceFromDataURL(videoId, dataUrl);
+          let resource = resourceFromDataURL$1(videoId, dataUrl);
           resources.add(resource);
 
           // use a data attribute to avoid making a real request
@@ -476,6 +478,188 @@
       }
     }
 
+    /* global fetch, FileReader */
+
+    // Helper: Generate unique ID for resources
+    function uid() {
+      return `_${Math.random().toString(36).substr(2, 9)}`;
+    }
+
+    // Helper: Create resource from data URL
+    function resourceFromDataURL(id, dataURL) {
+      let [data, content] = dataURL.split(',');
+      let [, mimetype] = data.split(':');
+      [mimetype] = mimetype.split(';');
+      let [, ext] = mimetype.split('/');
+      let path = `/__serialized__/${id}.${ext}`;
+      let url = new URL(path, document.URL).toString();
+      return {
+        url,
+        content,
+        mimetype
+      };
+    }
+
+    // Find all blob URLs in the DOM
+    function findAllBlobUrls(dom) {
+      const blobUrls = [];
+
+      // Find blob URLs in src attributes (img, video, audio, source, iframe)
+      const elementsWithSrc = dom.querySelectorAll('[src^="blob:"]');
+      for (const el of elementsWithSrc) {
+        if (!el.getAttribute('data-percy-element-id')) {
+          el.setAttribute('data-percy-element-id', uid());
+        }
+        blobUrls.push({
+          element: el,
+          blobUrl: el.src,
+          property: 'src',
+          id: el.getAttribute('data-percy-element-id')
+        });
+      }
+
+      // Find blob URLs in href attributes
+      // Skip stylesheet links as they're handled by serializeCSSOM
+      const elementsWithHref = dom.querySelectorAll('[href^="blob:"]');
+      for (const el of elementsWithHref) {
+        // Skip <link rel="stylesheet"> elements - they're handled by serializeCSSOM
+        if (el.tagName === 'LINK' && el.getAttribute('rel') === 'stylesheet') {
+          continue;
+        }
+        if (!el.getAttribute('data-percy-element-id')) {
+          el.setAttribute('data-percy-element-id', uid());
+        }
+        blobUrls.push({
+          element: el,
+          blobUrl: el.href,
+          property: 'href',
+          id: el.getAttribute('data-percy-element-id')
+        });
+      }
+
+      // Find blob URLs in inline styles (background-image, etc.)
+      const allElements = dom.querySelectorAll('*');
+      for (const el of allElements) {
+        const inlineStyle = el.getAttribute('style');
+        if (inlineStyle && inlineStyle.includes('blob:')) {
+          const blobMatches = inlineStyle.match(/url\(["']?(blob:[^"')]+)["']?\)/g);
+          if (blobMatches) {
+            if (!el.getAttribute('data-percy-element-id')) {
+              el.setAttribute('data-percy-element-id', uid());
+            }
+            for (const match of blobMatches) {
+              const urlMatch = match.match(/url\(["']?(blob:[^"')]+)["']?\)/);
+              blobUrls.push({
+                element: el,
+                blobUrl: urlMatch[1],
+                property: 'style',
+                id: el.getAttribute('data-percy-element-id')
+              });
+            }
+          }
+        }
+      }
+      return blobUrls;
+    }
+
+    // Convert blob URL to Percy resource (async)
+    async function convertBlobToResource(blobInfo) {
+      const {
+        element,
+        blobUrl,
+        property,
+        id
+      } = blobInfo;
+      try {
+        // Fetch the blob data
+        const response = await fetch(blobUrl);
+        const blob = await response.blob();
+
+        // Convert blob to data URL using FileReader
+        const dataUrl = await new Promise((resolve, reject) => {
+          /* eslint-disable-next-line no-undef */
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result);
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+        });
+
+        // Create Percy resource
+        const resource = resourceFromDataURL(id, dataUrl);
+
+        /* istanbul ignore else: property is always one of 'src', 'href', or 'style' */
+        if (property === 'src') {
+          element.removeAttribute('src');
+          element.setAttribute('data-percy-serialized-attribute-src', resource.url);
+        } else if (property === 'href') {
+          element.removeAttribute('href');
+          element.setAttribute('data-percy-serialized-attribute-href', resource.url);
+        } else if (property === 'style') {
+          const currentStyle = element.getAttribute('style');
+          const updatedStyle = currentStyle.replace(blobUrl, resource.url);
+          element.setAttribute('style', updatedStyle);
+        }
+        return resource;
+      } catch (err) {
+        throw new Error(`Failed to convert blob URL ${blobUrl}: ${err.message}`);
+      }
+    }
+
+    // Process lazy-loaded images (data-src to src)
+    function processLazyLoadedImages(dom) {
+      const lazyImages = dom.querySelectorAll('img[data-src], source[data-src]');
+      let processedCount = 0;
+      for (const el of lazyImages) {
+        const dataSrc = el.getAttribute('data-src');
+        if (dataSrc) {
+          try {
+            const url = new URL(dataSrc, window.location.origin);
+            if (['http:', 'https:', 'data:', 'blob:'].includes(url.protocol)) {
+              el.setAttribute('src', url.href);
+              processedCount++;
+            }
+          } catch (e) {
+            // Invalid URL, skip
+          }
+        }
+      }
+      return processedCount;
+    }
+
+    // Preprocess dynamic resources (async) - runs before cloning
+    async function preprocessDynamicResources(dom, resources, warnings) {
+      const processedResources = [];
+
+      // 1. Process lazy-loaded images
+      const lazyCount = processLazyLoadedImages(dom);
+      if (lazyCount > 0) {
+        console.debug(`Percy: Processed ${lazyCount} lazy-loaded images`);
+      }
+
+      // 2. Find all blob URLs
+      const blobUrls = findAllBlobUrls(dom);
+      if (blobUrls.length > 0) {
+        console.debug(`Percy: Found ${blobUrls.length} blob URLs to convert`);
+
+        // 3. Convert all blob URLs to resources (parallel)
+        const conversions = blobUrls.map(blobInfo => convertBlobToResource(blobInfo).then(resource => {
+          resources.add(resource);
+          processedResources.push(resource);
+          return resource;
+        }).catch(err => {
+          warnings.add(err.message);
+          console.warn(`Percy: ${err.message}`);
+          return null;
+        }));
+
+        // Wait for all conversions
+        await Promise.all(conversions);
+        const successCount = processedResources.length;
+        console.debug(`Percy: Successfully converted ${successCount}/${blobUrls.length} blob URLs`);
+      }
+      return processedResources;
+    }
+
     // Drop loading attribute. We do not scroll page in discovery stage but we want to make sure that
     // all resources are requested, so we drop loading attribute [as it can be set to lazy]
     function dropLoadingAttribute(domElement) {
@@ -527,7 +711,7 @@
       if (base64String == null) return;
       if (!cache.has(base64String)) {
         // create a resource from the serialized data url
-        let resource = resourceFromText(uid(), mimetype, base64String);
+        let resource = resourceFromText(uid$1(), mimetype, base64String);
         resources.add(resource);
         cache.set(base64String, resource.url);
       }
@@ -747,9 +931,9 @@
       // include the doctype with the html string
       return doctype(ctx.dom) + html;
     }
-    function serializeElements(ctx) {
+    async function serializeElements(ctx) {
       serializeInputElements(ctx);
-      serializeFrames(ctx);
+      await serializeFrames(ctx); // AWAIT async iframe serialization
       serializeVideos(ctx);
       if (!ctx.enableJavaScript) {
         serializeCSSOM(ctx);
@@ -764,7 +948,8 @@
             // getHTML requires shadowRoot to be passed explicitly
             // to serialize the shadow elements properly
             ctx.shadowRootElements.push(cloneShadowHost.shadowRoot);
-            serializeElements({
+            await serializeElements({
+              // AWAIT recursive call for shadow DOM
               ...ctx,
               dom: shadowHost.shadowRoot,
               clone: cloneShadowHost.shadowRoot
@@ -792,8 +977,8 @@
       window.resizeCount = 0;
     }
 
-    // Serializes a document and returns the resulting DOM string.
-    function serializeDOM(options) {
+    // Serializes a document and returns the resulting DOM string (ASYNC).
+    async function serializeDOM(options) {
       var _ctx$clone$body;
       let {
         dom = document,
@@ -822,8 +1007,15 @@
         forceShadowAsLightDOM
       };
       ctx.dom = dom;
+
+      // STEP 1: Preprocess dynamic resources (async) - before cloning
+      await preprocessDynamicResources(ctx.dom, ctx.resources, ctx.warnings);
+
+      // STEP 2: Clone the DOM
       ctx.clone = cloneNodeAndShadow(ctx);
-      serializeElements(ctx);
+
+      // STEP 3: Serialize elements (AWAIT async call)
+      await serializeElements(ctx);
       if (domTransformation) {
         try {
           // eslint-disable-next-line no-eval

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/dom",
-  "version": "1.31.4",
+  "version": "1.31.5-beta.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "latest"
+    "tag": "beta"
   },
   "main": "dist/bundle.js",
   "browser": "dist/bundle.js",
@@ -35,5 +35,5 @@
   "devDependencies": {
     "interactor.js": "^2.0.0-beta.10"
   },
-  "gitHead": "ae9af7043b17186a26e4b8c584faa45559260f9e"
+  "gitHead": "074c9bfd98f79d863b3375bff9d72602cff2798d"
 }