@yatoday/astro-ui 0.15.0 → 0.15.1

package/components/ImageGalleryIkea/ImageGalleryIkea.astro

@@ -149,14 +149,14 @@ const { container: containerClass = '', swiper: swiperClass = '', swiperThumb: s
 <script>
   import { on, get } from '../../utils';
 
-  import { register } from 'swiper/element/bundle';
-
-  register();
-
-  const init = () => {
+  // Dynamic import for better code splitting - loads Swiper only when needed
+  const init = async () => {
     const matches = document.querySelectorAll('div[data-image-gallery-ikea]');
     if (!matches.length) return;
 
+    const { register } = await import('swiper/element/bundle');
+    register();
+
     matches.forEach((elem) => {
       const id = (elem as HTMLElement).dataset.imageGalleryIkea || '0';
 

package/components/SwiperSlider/SwiperSlider.astro

@@ -86,47 +86,57 @@ const {
 
 <script>
   import { addClasses, removeClasses } from '../../utils';
-  import { register } from 'swiper/element/bundle';
 
-  register();
+  // Dynamic import for better code splitting - loads Swiper only when needed
+  async function initSwiper() {
+    const { register } = await import('swiper/element/bundle');
+    register();
 
-  const matches = document.querySelectorAll('swiper-container');
-  if (matches && matches.length) {
-    matches.forEach((elem) => {
-      const id = elem.dataset.id;
+    const matches = document.querySelectorAll('swiper-container');
+    if (matches && matches.length) {
+      matches.forEach((elem) => {
+        const id = elem.dataset.id;
 
-      if (id) {
-        elem.addEventListener(
-          'swiperreachend',
-          () => {
-            // Use requestAnimationFrame to batch DOM updates and prevent forced reflow
-            requestAnimationFrame(() => {
-              removeClasses(`#btn-next-${id}`, 'opacity-100');
-              addClasses(`#btn-next-${id}`, 'opacity-0');
-            });
-          },
-          false
-        );
-        elem.addEventListener(
-          'swiperreachbeginning',
-          () => {
-            requestAnimationFrame(() => {
-              addClasses(`#btn-prev-${id}`, 'opacity-0');
-            });
-          },
-          false
-        );
-        elem.addEventListener(
-          'swiperfromedge',
-          () => {
-            requestAnimationFrame(() => {
-              removeClasses(`#btn-prev-${id}`, 'opacity-0');
-              addClasses(`#btn-next-${id}`, 'opacity-100');
-            });
-          },
-          false
-        );
-      }
-    });
+        if (id) {
+          elem.addEventListener(
+            'swiperreachend',
+            () => {
+              // Use requestAnimationFrame to batch DOM updates and prevent forced reflow
+              requestAnimationFrame(() => {
+                removeClasses(`#btn-next-${id}`, 'opacity-100');
+                addClasses(`#btn-next-${id}`, 'opacity-0');
+              });
+            },
+            false
+          );
+          elem.addEventListener(
+            'swiperreachbeginning',
+            () => {
+              requestAnimationFrame(() => {
+                addClasses(`#btn-prev-${id}`, 'opacity-0');
+              });
+            },
+            false
+          );
+          elem.addEventListener(
+            'swiperfromedge',
+            () => {
+              requestAnimationFrame(() => {
+                removeClasses(`#btn-prev-${id}`, 'opacity-0');
+                addClasses(`#btn-next-${id}`, 'opacity-100');
+              });
+            },
+            false
+          );
+        }
+      });
+    }
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSwiper);
+  } else {
+    initSwiper();
   }
 </script>

package/components/WidgetHeroSlider/WidgetHeroSlider.astro

@@ -201,6 +201,16 @@ const {
 </WidgetWrapper>
 
 <script>
-  import { register } from 'swiper/element/bundle';
-  register();
+  // Dynamic import for better code splitting - loads Swiper only when needed
+  async function initSwiper() {
+    const { register } = await import('swiper/element/bundle');
+    register();
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSwiper);
+  } else {
+    initSwiper();
+  }
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",