codeplay-common 4.7.5 → 4.7.6

package/files/take-screen-image.js

@@ -1211,12 +1211,33 @@ async function capturePageSnapshot(client) {
       };
 
       const serializeDocument = async (sourceDocument) => {
-        const clonedRoot = sourceDocument.documentElement.cloneNode(true);
-        const originalElements = [
-          sourceDocument.documentElement,
-          ...sourceDocument.documentElement.querySelectorAll('*'),
-        ];
-        const clonedElements = [clonedRoot, ...clonedRoot.querySelectorAll('*')];
+        const originalElements = [];
+        const clonedElements = [];
+        const cloneWithShadowRoots = (original) => {
+          const clone = original.cloneNode(false);
+          if (original.nodeType === Node.ELEMENT_NODE) {
+            originalElements.push(original);
+            clonedElements.push(clone);
+          }
+          for (const child of original.childNodes) {
+            clone.appendChild(cloneWithShadowRoots(child));
+          }
+          if (original.shadowRoot) {
+            const template = sourceDocument.createElement('template');
+            template.setAttribute('shadowrootmode', 'open');
+            for (const stylesheet of original.shadowRoot.adoptedStyleSheets || []) {
+              const style = sourceDocument.createElement('style');
+              style.textContent = [...stylesheet.cssRules].map((rule) => rule.cssText).join('\\n');
+              template.content.appendChild(style);
+            }
+            for (const child of original.shadowRoot.childNodes) {
+              template.content.appendChild(cloneWithShadowRoots(child));
+            }
+            clone.prepend(template);
+          }
+          return clone;
+        };
+        const clonedRoot = cloneWithShadowRoots(sourceDocument.documentElement);
 
         clonedRoot.setAttribute(
           'data-responsive-window-scroll-y',
@@ -1234,9 +1255,13 @@ async function capturePageSnapshot(client) {
             clone.setAttribute('data-responsive-scroll-left', String(original.scrollLeft));
           }
 
-          if (original.classList.contains('swiper-initialized')) {
+          if (original.classList.contains('swiper-initialized') || original.swiper) {
             clone.setAttribute('data-responsive-swiper-width', String(original.clientWidth));
             clone.setAttribute('data-responsive-swiper-height', String(original.clientHeight));
+            if (original.swiper) {
+              clone.setAttribute('data-responsive-swiper-active-index', String(original.swiper.activeIndex));
+              clone.setAttribute('data-responsive-swiper-direction', original.swiper.params.direction);
+            }
           }
 
           const tagName = original.tagName?.toLowerCase();
@@ -1321,7 +1346,7 @@ async function capturePageSnapshot(client) {
           }
         }));
 
-        clonedRoot.querySelectorAll('script, link[rel="modulepreload"]').forEach(
+        clonedElements.filter((element) => element.matches('script, link[rel="modulepreload"]')).forEach(
           (element) => element.remove(),
         );
         clonedRoot.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(
@@ -1560,25 +1585,34 @@ async function waitForReplayLayout(client, snapshot) {
         new Promise((resolve) => setTimeout(resolve, 5000)),
       ]);
 
-      const replayElements = (selector) => replayDocuments.flatMap((replayDocument) => (
-        [...replayDocument.querySelectorAll(selector)]
+      const replayRoots = [];
+      const collectRoots = (root) => {
+        replayRoots.push(root);
+        root.querySelectorAll('*').forEach((element) => {
+          if (element.shadowRoot) collectRoots(element.shadowRoot);
+        });
+      };
+      replayDocuments.forEach(collectRoots);
+      const replayElements = (selector) => replayRoots.flatMap((root) => (
+        [...root.querySelectorAll(selector)]
       ));
 
       replayElements('[data-responsive-swiper-width]').forEach((swiper) => {
-        const wrapper = [...swiper.children].find((element) => (
+        const wrapper = swiper.shadowRoot?.querySelector('.swiper-wrapper') || [...swiper.children].find((element) => (
           element.classList.contains('swiper-wrapper')
         ));
 
         if (!wrapper) return;
 
-        const slides = [...wrapper.children].filter((element) => (
-          element.classList.contains('swiper-slide')
+        const slides = [...(swiper.shadowRoot ? swiper.children : wrapper.children)].filter((element) => (
+          element.matches('.swiper-slide, swiper-slide')
         ));
         const sourceWidth = Number(swiper.dataset.responsiveSwiperWidth);
         const sourceHeight = Number(swiper.dataset.responsiveSwiperHeight);
         const widthScale = sourceWidth > 0 ? swiper.clientWidth / sourceWidth : 1;
         const heightScale = sourceHeight > 0 ? swiper.clientHeight / sourceHeight : 1;
-        const isVertical = swiper.classList.contains('swiper-vertical');
+        const isVertical = swiper.dataset.responsiveSwiperDirection === 'vertical'
+          || swiper.classList.contains('swiper-vertical');
 
         slides.forEach((slide) => {
           if (!slide.dataset.responsiveSwiperWidth && slide.style.width) {
@@ -1601,7 +1635,7 @@ async function waitForReplayLayout(client, snapshot) {
           }
         });
 
-        const activeSlide = slides.find((slide) => (
+        const activeSlide = slides[Number(swiper.dataset.responsiveSwiperActiveIndex)] || slides.find((slide) => (
           slide.classList.contains('swiper-slide-active')
         )) || slides[0];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeplay-common",
-  "version": "4.7.5",
+  "version": "4.7.6",
   "description": "Common build scripts and files",
   "scripts": {
 	"postinstall": "node scripts/sync-files.js",