@percy/core 1.31.9-beta.5 → 1.31.10-alpha.0

package/dist/api.js

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path, { dirname, resolve } from 'path';
 import logger from '@percy/logger';
 import { normalize } from '@percy/config/utils';
-import { getPackageJSON, Server, percyAutomateRequestHandler, percyBuildEventHandler } from './utils.js';
+import { getPackageJSON, Server, percyAutomateRequestHandler, percyBuildEventHandler, computeResponsiveWidths } from './utils.js';
 import WebdriverUtils from '@percy/webdriver-utils';
 import { handleSyncJob } from './snapshot.js';
 // Previously, we used `createRequire(import.meta.url).resolve` to resolve the path to the module.
@@ -102,6 +102,22 @@ export function createPercyServer(percy, port) {
       type: percy.client.tokenType()
     });
   })
+  // compute widths configuration with heights
+  .route('get', '/percy/widths-config', (req, res) => {
+    // Parse widths from query parameters (e.g., ?widths=375,1280)
+    const widthsParam = req.url.searchParams.get('widths');
+    const userPassedWidths = widthsParam ? widthsParam.split(',').map(w => parseInt(w.trim(), 10)).filter(w => !isNaN(w)) : [];
+    const eligibleWidths = {
+      mobile: percy.deviceDetails ? percy.deviceDetails.map(d => d.width) : [],
+      config: percy.config.snapshot.widths
+    };
+    const deviceDetails = percy.deviceDetails || [];
+    const widths = computeResponsiveWidths(userPassedWidths, eligibleWidths, deviceDetails);
+    return res.json(200, {
+      widths,
+      success: true
+    });
+  })
   // get or set config options
   .route(['get', 'post'], '/percy/config', async (req, res) => res.json(200, {
     config: req.body ? percy.set(req.body) : percy.config,

package/dist/config.js

@@ -905,6 +905,44 @@ export const snapshotSchema = {
                 items: {
                   type: 'string'
                 }
+              },
+              corsIframes: {
+                type: 'array',
+                items: {
+                  type: 'object',
+                  additionalProperties: false,
+                  properties: {
+                    frameUrl: {
+                      type: 'string',
+                      description: 'The URL of the cross-origin iframe'
+                    },
+                    iframeData: {
+                      type: 'object',
+                      additionalProperties: false,
+                      properties: {
+                        percyElementId: {
+                          type: 'string',
+                          description: 'Unique identifier for the iframe element in the DOM'
+                        }
+                      }
+                    },
+                    iframeSnapshot: {
+                      type: 'object',
+                      required: ['html'],
+                      additionalProperties: false,
+                      properties: {
+                        html: {
+                          type: 'string',
+                          description: 'Serialized HTML content of the iframe'
+                        },
+                        resources: {
+                          $ref: '/snapshot/dom#/properties/domSnapshot/oneOf/1/properties/resources',
+                          description: 'Resources discovered within the iframe'
+                        }
+                      }
+                    }
+                  }
+                }
               }
             }
           }, {

package/dist/percy.js

@@ -13,7 +13,7 @@ import logger from '@percy/logger';
 import { getProxy } from '@percy/client/utils';
 import Browser from './browser.js';
 import Pako from 'pako';
-import { base64encode, generatePromise, yieldAll, yieldTo, redactSecrets, detectSystemProxyAndLog, checkSDKVersion } from './utils.js';
+import { base64encode, generatePromise, yieldAll, yieldTo, redactSecrets, detectSystemProxyAndLog, checkSDKVersion, processCorsIframes } from './utils.js';
 import { createPercyServer, createStaticServer } from './api.js';
 import { gatherSnapshots, createSnapshotsQueue, validateSnapshotOptions } from './snapshot.js';
 import { discoverSnapshotResources, createDiscoveryQueue } from './discovery.js';
@@ -449,6 +449,10 @@ export class Percy {
 
     // validate options and add client & environment info
     options = validateSnapshotOptions(options);
+    // process CORS iframes in domSnapshot before validation
+    if (options.domSnapshot) {
+      options.domSnapshot = processCorsIframes(options.domSnapshot);
+    }
     this.client.addClientInfo(options.clientInfo);
     this.client.addEnvironmentInfo(options.environmentInfo);
 

package/dist/utils.js

@@ -26,6 +26,87 @@ export function normalizeURL(url) {
   return `${protocol}//${host}${pathname}${search}`;
 }
 
+// Appends a search parameter to a URL. Returns the original URL if the value is not provided.
+export function appendUrlSearchParam(urlString, key, value) {
+  if (!value) return urlString;
+  try {
+    const url = new URL(urlString);
+    url.searchParams.set(key, String(value));
+    return url.toString();
+  } catch (error) {
+    logger('core:utils').debug(`Failed to append search param to URL: ${urlString}`, error);
+    return urlString;
+  }
+}
+
+// Process CORS iframes in a single domSnapshot object
+export function processCorsIframesInDomSnapshot(domSnapshot) {
+  var _domSnapshot$corsIfra;
+  if (!(domSnapshot !== null && domSnapshot !== void 0 && (_domSnapshot$corsIfra = domSnapshot.corsIframes) !== null && _domSnapshot$corsIfra !== void 0 && _domSnapshot$corsIfra.length)) {
+    return domSnapshot;
+  }
+  const crossOriginFrames = domSnapshot.corsIframes;
+
+  // Initialize resources array if it doesn't exist
+  if (!domSnapshot.resources) {
+    domSnapshot.resources = [];
+  }
+  for (const frame of crossOriginFrames) {
+    const {
+      iframeData,
+      iframeSnapshot,
+      frameUrl
+    } = frame;
+
+    // Validate required fields and skip malformed entries
+    if (!frameUrl || !(iframeSnapshot !== null && iframeSnapshot !== void 0 && iframeSnapshot.html)) {
+      logger('core:utils').debug('Skipping malformed corsIframes entry: missing frameUrl or iframeSnapshot.html', frame);
+      continue;
+    }
+
+    // width is only passed in case of responsiveSnapshotCapture
+    // Build frame URL with width parameter if available
+    const frameUrlWithWidth = domSnapshot.width ? appendUrlSearchParam(frameUrl, 'percy_width', domSnapshot.width) : frameUrl;
+
+    // Add iframe snapshot resources to main resources
+    if (iframeSnapshot !== null && iframeSnapshot !== void 0 && iframeSnapshot.resources) {
+      domSnapshot.resources.push(...iframeSnapshot.resources);
+    }
+
+    // Create a new resource for the iframe's HTML
+    const iframeResource = {
+      url: frameUrlWithWidth,
+      content: iframeSnapshot.html,
+      mimetype: 'text/html'
+    };
+    domSnapshot.resources.push(iframeResource);
+
+    // Update iframe src attribute in HTML
+    if (iframeData !== null && iframeData !== void 0 && iframeData.percyElementId) {
+      const escapedId = iframeData.percyElementId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      // nosemgrep: javascript.lang.security.audit.detect-non-literal-regexp.detect-non-literal-regexp
+      const regex = new RegExp(`(<iframe[^>]*data-percy-element-id=["']${escapedId}["'][^>]*>)`);
+      const match = domSnapshot.html.match(regex);
+      /* istanbul ignore next: iframe matching logic depends on DOM structure */
+      if (match) {
+        const iframeTag = match[1];
+        const newIframeTag = iframeTag.replace(/src="[^"]*"/i, `src="${frameUrlWithWidth}"`);
+        domSnapshot.html = domSnapshot.html.replace(iframeTag, newIframeTag);
+      }
+    }
+  }
+  return domSnapshot;
+}
+
+// Process CORS iframes - handles both single object and array of domSnapshots
+export function processCorsIframes(domSnapshot) {
+  if (!domSnapshot) return domSnapshot;
+  if (Array.isArray(domSnapshot)) {
+    return domSnapshot.map(snap => processCorsIframesInDomSnapshot(snap));
+  }
+  return processCorsIframesInDomSnapshot(domSnapshot);
+}
+
 /**
  * Detects font MIME type from file content by checking magic bytes.
  * Handles string-based signatures (WOFF, OTTO) and binary signatures (TTF).
@@ -737,4 +818,43 @@ export async function checkSDKVersion(clientInfo) {
   } catch (error) {
     log.debug('Could not check SDK version', error);
   }
+}
+
+/**
+ * Computes widths configuration with heights for responsive snapshot capture
+ * @param {Array<number>} userPassedWidths - Widths passed by the user
+ * @param {Object} eligibleWidths - Object containing mobile and config widths
+ * @param {Array<Object>} deviceDetails - Array of device objects with width and height
+ * @returns {Array<Object>} Array of width objects sorted in ascending order
+ */
+export function computeResponsiveWidths(userPassedWidths, eligibleWidths, deviceDetails) {
+  const widthHeightMap = new Map();
+
+  // Add mobile widths with their associated heights from deviceDetails
+  if (eligibleWidths.mobile.length !== 0) {
+    eligibleWidths.mobile.forEach(width => {
+      if (!widthHeightMap.has(width)) {
+        const deviceInfo = deviceDetails.find(device => device.width === width);
+        if (deviceInfo !== null && deviceInfo !== void 0 && deviceInfo.height) {
+          widthHeightMap.set(width, {
+            width,
+            height: deviceInfo.height
+          });
+        }
+      }
+    });
+  }
+
+  // Add user passed or config widths without height
+  // If a width exists in both mobile and user-passed/config, user-passed/config takes precedence (without height)
+  // This ensures consistency with percy-storybook SDK behavior
+  const otherWidths = userPassedWidths.length !== 0 ? userPassedWidths : eligibleWidths.config;
+  otherWidths.forEach(width => {
+    widthHeightMap.set(width, {
+      width
+    });
+  });
+
+  // Convert to array and sort by width in ascending order
+  return Array.from(widthHeightMap.values()).sort((a, b) => a.width - b.width);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@percy/core",
-  "version": "1.31.9-beta.5",
+  "version": "1.31.10-alpha.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -9,7 +9,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "tag": "beta"
+    "tag": "alpha"
   },
   "engines": {
     "node": ">=14"
@@ -43,12 +43,12 @@
     "test:types": "tsd"
   },
   "dependencies": {
-    "@percy/client": "1.31.9-beta.5",
-    "@percy/config": "1.31.9-beta.5",
-    "@percy/dom": "1.31.9-beta.5",
-    "@percy/logger": "1.31.9-beta.5",
-    "@percy/monitoring": "1.31.9-beta.5",
-    "@percy/webdriver-utils": "1.31.9-beta.5",
+    "@percy/client": "1.31.10-alpha.0",
+    "@percy/config": "1.31.10-alpha.0",
+    "@percy/dom": "1.31.10-alpha.0",
+    "@percy/logger": "1.31.10-alpha.0",
+    "@percy/monitoring": "1.31.10-alpha.0",
+    "@percy/webdriver-utils": "1.31.10-alpha.0",
     "content-disposition": "^0.5.4",
     "cross-spawn": "^7.0.3",
     "extract-zip": "^2.0.1",
@@ -61,5 +61,5 @@
     "ws": "^8.17.1",
     "yaml": "^2.4.1"
   },
-  "gitHead": "0fa4c3c4560b63cf50ed61a93a8772c745c70b6e"
+  "gitHead": "9ee22836105a578d5f602d376a660c349bf6da0c"
 }