@gem-sdk/swiper 0.0.15-dev.1 → 0.0.16-dev.1

package/swiper-element-bundle.min.mjs

@@ -1,5 +1,5 @@
 /**
- * Swiper Custom Element 0.0.15-dev.1
+ * Swiper Custom Element 0.0.16-dev.1
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *

package/swiper-element-bundle.mjs

@@ -1,5 +1,5 @@
 /**
- * Swiper Custom Element 0.0.15-dev.1
+ * Swiper Custom Element 0.0.16-dev.1
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *

package/swiper-element.js

@@ -1,5 +1,5 @@
 /**
- * Swiper Custom Element 0.0.15-dev.1
+ * Swiper Custom Element 0.0.16-dev.1
  * Gem SDK - Swiper, Customized of swiper
  * https://swiperjs.com
  *
@@ -189,7 +189,7 @@
   function now() {
     return Date.now();
   }
-  function getComputedStyle$1(el) {
+  function getComputedStyle(el) {
     const window = getWindow();
     let style;
     if (window.getComputedStyle) {
@@ -211,7 +211,7 @@
     let matrix;
     let curTransform;
     let transformMatrix;
-    const curStyle = getComputedStyle$1(el);
+    const curStyle = getComputedStyle(el);
     if (window.WebKitCSSMatrix) {
       curTransform = curStyle.transform || curStyle.webkitTransform;
       if (curTransform.split(',').length > 6) {
@@ -459,6 +459,23 @@
       el.innerHTML = html;
     }
   }
+  function computeAutoSlideSize(slideEl, getDirectionPropValue) {
+    const styles = getComputedStyle(slideEl);
+    const width = getDirectionPropValue(styles, 'width');
+    const paddingLeft = getDirectionPropValue(styles, 'padding-left');
+    const paddingRight = getDirectionPropValue(styles, 'padding-right');
+    const marginLeft = getDirectionPropValue(styles, 'margin-left');
+    const marginRight = getDirectionPropValue(styles, 'margin-right');
+    const boxSizing = styles.getPropertyValue('box-sizing');
+    if (boxSizing && boxSizing === 'border-box') {
+      return width + marginLeft + marginRight;
+    }
+    const {
+      clientWidth,
+      offsetWidth
+    } = slideEl;
+    return width + paddingLeft + paddingRight + marginLeft + marginRight + (offsetWidth - clientWidth);
+  }
 
   let support;
   function calcSupport() {
@@ -898,44 +915,87 @@
     // Calc slides
     let slideSize;
     const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params.breakpoints).filter(key => typeof params.breakpoints[key].slidesPerView !== 'undefined').length > 0;
-    for (let i = 0; i < slidesLength; i += 1) {
-      slideSize = 0;
-      let slide;
-      if (slides[i]) slide = slides[i];
-      if (slides[i] && elementStyle(slide, 'display') === 'none') continue; // eslint-disable-line
+    const isAutoSlides = params.slidesPerView === 'auto';
 
-      if (params.slidesPerView === 'auto') {
-        if (shouldResetSlideSize && slides[i]) {
+    // --- Phase 1: Batch DOM writes (grid updates, width/transform resets) ---
+    // Moving all style writes before any reads prevents per-slide forced reflows
+    if (gridEnabled) {
+      for (let i = 0; i < slidesLength; i += 1) {
+        if (slides[i]) swiper.grid.updateSlide(i, slides[i], slides);
+      }
+    }
+    const savedTransforms = [];
+    if (isAutoSlides) {
+      for (let i = 0; i < slidesLength; i += 1) {
+        if (!slides[i]) continue;
+        if (shouldResetSlideSize) {
           slides[i].style[swiper.getDirectionLabel('width')] = ``;
         }
-        const slideStyles = getComputedStyle(slide);
-        const currentTransform = slide.style.transform;
-        const currentWebKitTransform = slide.style.webkitTransform;
-        if (currentTransform) slide.style.transform = 'none';
-        if (currentWebKitTransform) slide.style.webkitTransform = 'none';
+        const currentTransform = slides[i].style.transform;
+        const currentWebKitTransform = slides[i].style.webkitTransform;
+        savedTransforms[i] = {
+          transform: currentTransform,
+          webkitTransform: currentWebKitTransform
+        };
+        if (currentTransform) {
+          slides[i].style.transform = 'none';
+        }
+        if (currentWebKitTransform) {
+          slides[i].style.webkitTransform = 'none';
+        }
+      }
+    }
+
+    // --- Phase 2: Batch DOM reads (single forced reflow for all slides) ---
+    // Read wrapper offset here (before Phase 3 writes) so it's batched with slide reads, not after
+    const wrapperOffset = swiper.isElement ? swiper.wrapperEl[`offset${swiper.isHorizontal() ? 'Left' : 'Top'}`] : 0;
+    const slideVisible = [];
+    const slideSizes = [];
+    for (let i = 0; i < slidesLength; i += 1) {
+      if (!slides[i]) {
+        slideVisible[i] = false;
+        continue;
+      }
+      if (elementStyle(slides[i], 'display') === 'none') {
+        slideVisible[i] = false;
+        continue;
+      }
+      slideVisible[i] = true;
+
+      // Cache offsetHeight for autoHeight (batched here to avoid a separate forced reflow in updateAutoHeight)
+      if (params.autoHeight) {
+        slides[i].swiperSlideHeight = slides[i]['offsetHeight'];
+      }
+      if (isAutoSlides) {
         if (params.roundLengths) {
-          slideSize = swiper.isHorizontal() ? elementOuterSize(slide, 'width', true) : elementOuterSize(slide, 'height', true);
+          slideSizes[i] = swiper.isHorizontal() ? elementOuterSize(slides[i], 'width', true) : elementOuterSize(slides[i], 'height', true);
         } else {
-          // eslint-disable-next-line
-          const width = parseFloat(slideStyles.getPropertyValue('width')) || slide.offsetWidth;
-          const paddingLeft = parseFloat(slideStyles.getPropertyValue('padding-left')) || 0;
-          const paddingRight = parseFloat(slideStyles.getPropertyValue('padding-right')) || 0;
-          const marginLeft = parseFloat(slideStyles.getPropertyValue('margin-left')) || 0;
-          const marginRight = parseFloat(slideStyles.getPropertyValue('margin-right')) || 0;
-          const boxSizing = slideStyles.getPropertyValue('box-sizing');
-          if (boxSizing && boxSizing === 'border-box') {
-            slideSize = width + marginLeft + marginRight;
-          } else {
-            const {
-              clientWidth,
-              offsetWidth
-            } = slide;
-            slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight + (offsetWidth - clientWidth);
-          }
+          slideSizes[i] = computeAutoSlideSize(slides[i], getDirectionPropertyValue);
         }
-        if (currentTransform) slide.style.transform = currentTransform;
-        if (currentWebKitTransform) slide.style.webkitTransform = currentWebKitTransform;
-        if (params.roundLengths) slideSize = Math.floor(slideSize);
+        if (params.roundLengths) slideSizes[i] = Math.floor(slideSizes[i]);
+      }
+    }
+
+    // --- Phase 3: Restore transforms (batch write) ---
+    if (isAutoSlides) {
+      for (let i = 0; i < slidesLength; i += 1) {
+        if (!savedTransforms[i]) continue;
+        if (savedTransforms[i].transform) {
+          slides[i].style.transform = savedTransforms[i].transform;
+        }
+        if (savedTransforms[i].webkitTransform) {
+          slides[i].style.webkitTransform = savedTransforms[i].webkitTransform;
+        }
+      }
+    }
+
+    // --- Phase 4: Calculate positions + set sizes (math + deferred writes) ---
+    const cssOverflowAdj = swiper.cssOverflowAdjustment();
+    for (let i = 0; i < slidesLength; i += 1) {
+      slideSize = 0;
+      if (!slideVisible[i]) continue;
+      if (isAutoSlides) {
+        slideSize = slideSizes[i] || 0;
       } else {
         slideSize = (swiperSize - (params.slidesPerView - 1) * spaceBetween) / params.slidesPerView;
         if (params.roundLengths) slideSize = Math.floor(slideSize);
@@ -963,7 +1023,12 @@
         slidesGrid.push(slidePosition);
         slidePosition = slidePosition + slideSize + spaceBetween;
       }
-      swiper.slidesTotalSize += slideSize + spaceBetween;
+
+      // Set swiperSlideOffset from computed grid position (avoids DOM reads in updateSlidesOffset)
+      if (slides[i]) {
+        slides[i].swiperSlideOffset = slidesGrid[slidesGrid.length - 1] - cssOverflowAdj - wrapperOffset;
+      }
+      swiper.virtualSize += slideSize + spaceBetween;
       prevSlideSize = slideSize;
       index += 1;
     }
@@ -1058,7 +1123,9 @@
       swiper.emit('slidesGridLengthChange');
     }
     if (params.watchSlidesProgress) {
-      swiper.updateSlidesOffset();
+      swiper.updateSlidesOffset({
+        isCalculatedFromUpdateSlides: false
+      });
     }
     swiper.emit('slidesUpdated');
     if (!params.cssMode && params.effect === 'slide') {
@@ -1103,14 +1170,20 @@
     let newHeight = 0;
     for (let i = 0; i < activeSlides.length; i += 1) {
       if (typeof activeSlides[i] !== 'undefined') {
-        const height = activeSlides[i].offsetHeight;
+        const height = activeSlides[i].swiperSlideHeight ?? activeSlides[i]['offsetHeight'];
         newHeight = height > newHeight ? height : newHeight;
       }
     }
     if (newHeight || newHeight === 0) swiper.wrapperEl.style.height = `${newHeight}px`;
   }
 
-  function updateSlidesOffset() {
+  function updateSlidesOffset(params) {
+    const {
+      isCalculatedFromUpdateSlides = false
+    } = params ?? {};
+    if (isCalculatedFromUpdateSlides) {
+      return;
+    }
     const swiper = this;
     const slides = swiper.slides;
     // eslint-disable-next-line
@@ -2397,7 +2470,9 @@
       swiper.updateSlides();
     }
     if (params.watchSlidesProgress) {
-      swiper.updateSlidesOffset();
+      swiper.updateSlidesOffset({
+        isCalculatedFromUpdateSlides: params.slidesPerView === 'auto'
+      });
     }
     if (slideTo) {
       if (prependSlidesIndexes.length > 0 && isPrev) {
@@ -3962,7 +4037,8 @@
         },
         // Images
         imagesToLoad: [],
-        imagesLoaded: 0
+        imagesLoaded: 0,
+        rtl: params?.rtl
       });
       swiper.emit('_swiper');
 
@@ -4224,15 +4300,18 @@
           wrapperEl.append(slideEl);
         });
       }
+      const rtl = swiper.params.rtl ?? (el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl');
+      const wrongRTL = false;
       Object.assign(swiper, {
         el,
         wrapperEl,
         slidesEl: swiper.isElement && !el.parentNode.host.slideSlots ? el.parentNode.host : wrapperEl,
         hostEl: swiper.isElement ? el.parentNode.host : el,
         mounted: true,
-        rtl: el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl',
-        rtlTranslate: swiper.params.direction === 'horizontal' && (el.dir.toLowerCase() === 'rtl' || elementStyle(el, 'direction') === 'rtl'),
-        wrongRTL: elementStyle(wrapperEl, 'display') === '-webkit-box'
+        // RTL
+        rtl,
+        rtlTranslate: swiper.params.direction === 'horizontal' && rtl,
+        wrongRTL
       });
       return true;
     }
@@ -4312,7 +4391,8 @@
       });
       preload(swiper);
       swiper.initialized = true;
-      preload(swiper);
+
+      // Emit
       swiper.emit('init');
       swiper.emit('afterInit');
       return swiper;
@@ -4723,7 +4803,7 @@
   }
 
   /**
-   * Swiper Custom Element 0.0.15-dev.1
+   * Swiper Custom Element 0.0.16-dev.1
    * Gem SDK - Swiper, Customized of swiper
    * https://swiperjs.com
    *