update swiper library, implement tree shaking in webpack, remove dyna…

…mic imports for swiper and panelsnap
middlebury · Dec 14, 2023 · 7035595 · 7035595
1 parent dff5472
commit 7035595
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 178 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
     "promise-polyfill": "^8.3.0",
     "stickybits": "^3.7.9",
     "superclamp": "^0.2.3",
-    "swiper": "^9.4.1"
+    "swiper": "^11.0.5"
   },
   "bundlesize": [
     {

diff --git a/src/js/card-carousel.ts b/src/js/card-carousel.ts
@@ -1,4 +1,5 @@
-// import { Swiper, Navigation, A11y, SwiperOptions } from 'swiper';
+import Swiper from 'swiper';
+import { Navigation, A11y } from 'swiper/modules';
 
 import { $, $$ } from './utils/dom';
 import config from './config';
@@ -20,46 +21,42 @@ export function randomizeChildren(elem: HTMLElement) {
 const carousels = $$('.js-card-carousel');
 
 carousels.forEach((el: HTMLElement) => {
-  import(/* webpackChunkName: "swiper" */ 'swiper').then(
-    ({ Swiper, Navigation, A11y }) => {
-      function createCardCarousel(elem: HTMLElement, swiperConfig: {}) {
-        const swiperWrapper = $('.js-swiper-wrapper', elem);
-        const swiperContainer = $('.js-swiper-container', elem);
-        const randomize = elem.hasAttribute('data-randomize');
+  function createCardCarousel(elem: HTMLElement, swiperConfig: {}) {
+    const swiperWrapper = $('.js-swiper-wrapper', elem);
+    const swiperContainer = $('.js-swiper-container', elem);
+    const randomize = elem.hasAttribute('data-randomize');
+
+    // do nothing if no swiper elements
+    if (!swiperWrapper || !swiperWrapper.firstChild || !swiperContainer) {
+      return;
+    }
 
-        // do nothing if no swiper elements
-        if (!swiperWrapper || !swiperWrapper.firstChild || !swiperContainer) {
-          return;
-        }
+    if (randomize) {
+      randomizeChildren(swiperWrapper);
+    }
 
-        if (randomize) {
-          randomizeChildren(swiperWrapper);
-        }
+    return new Swiper(swiperContainer, swiperConfig);
+  }
 
-        return new Swiper(swiperContainer, swiperConfig);
+  const carouselSwiperConfig = {
+    modules: [Navigation, A11y],
+    a11y: {},
+    slidesPerView: 1,
+    grabCursor: true,
+    breakpoints: {
+      [config.breakpoints.lg]: {
+        slidesPerView: 2
+      },
+      [config.breakpoints.xl]: {
+        slidesPerView: 3
       }
-
-      const carouselSwiperConfig = {
-        modules: [Navigation, A11y],
-        a11y: {},
-        slidesPerView: 1,
-        grabCursor: true,
-        breakpoints: {
-          [config.breakpoints.lg]: {
-            slidesPerView: 2
-          },
-          [config.breakpoints.xl]: {
-            slidesPerView: 3
-          }
-        },
-        navigation: {
-          nextEl: $('.js-card-carousel-next-button', el) as HTMLElement,
-          prevEl: $('.js-card-carousel-prev-button', el) as HTMLElement,
-          disabledClass: 'button--disabled'
-        }
-      };
-
-      createCardCarousel(el, carouselSwiperConfig);
+    },
+    navigation: {
+      nextEl: $('.js-card-carousel-next-button', el) as HTMLElement,
+      prevEl: $('.js-card-carousel-prev-button', el) as HTMLElement,
+      disabledClass: 'button--disabled'
     }
-  );
+  };
+
+  createCardCarousel(el, carouselSwiperConfig);
 });
diff --git a/src/js/dispatches.ts b/src/js/dispatches.ts
@@ -1,4 +1,5 @@
-// import { Navigation, A11y, SwiperOptions } from 'swiper';
+import Swiper from 'swiper';
+import { Navigation, A11y } from 'swiper/modules';
 
 import { randomizeChildren } from './card-carousel';
 import { $, $$ } from './utils/dom';
@@ -44,51 +45,45 @@ const dispatchesCards = $$('.dispatches__container');
 
 dispatchesCards.forEach((elem) => new Dispatches(elem));
 
-// let dispatchesSwiperConfig: SwiperOptions = {};
-
 const dispatches = $$('.js-dispatches');
 
 dispatches.forEach((el: HTMLElement) => {
-  import(/* webpackChunkName: "swiper" */ 'swiper').then(
-    ({ Swiper, Navigation, A11y }) => {
-      const dispatchesSwiperConfig = {
-        modules: [Navigation, A11y],
-        a11y: {},
-        slidesPerView: 1,
-        grabCursor: true,
-        breakpoints: {
-          [config.breakpoints.sm]: {
-            slidesPerView: 3
-          },
-          [config.breakpoints.lg]: {
-            slidesPerView: 4
-          }
-        },
-        navigation: {
-          nextEl: $('.js-dispatches-next-button', el) as HTMLElement,
-          prevEl: $('.js-dispatches-prev-button', el) as HTMLElement,
-          disabledClass: 'button--disabled'
-        }
-      };
-
-      function createCardCarousel(elem: HTMLElement, swiperConfig: {}) {
-        const swiperWrapper = $('.js-swiper-wrapper', elem);
-        const swiperContainer = $('.js-swiper-container', elem);
-        const randomize = elem.hasAttribute('data-randomize');
-
-        // do nothing if no swiper elements
-        if (!swiperWrapper || !swiperWrapper.firstChild || !swiperContainer) {
-          return;
-        }
-
-        if (randomize) {
-          randomizeChildren(swiperWrapper);
-        }
-
-        return new Swiper(swiperContainer, swiperConfig);
+  const dispatchesSwiperConfig = {
+    modules: [Navigation, A11y],
+    a11y: {},
+    slidesPerView: 1,
+    grabCursor: true,
+    breakpoints: {
+      [config.breakpoints.sm]: {
+        slidesPerView: 3
+      },
+      [config.breakpoints.lg]: {
+        slidesPerView: 4
       }
+    },
+    navigation: {
+      nextEl: $('.js-dispatches-next-button', el) as HTMLElement,
+      prevEl: $('.js-dispatches-prev-button', el) as HTMLElement,
+      disabledClass: 'button--disabled'
+    }
+  };
+
+  function createCardCarousel(elem: HTMLElement, swiperConfig: {}) {
+    const swiperWrapper = $('.js-swiper-wrapper', elem);
+    const swiperContainer = $('.js-swiper-container', elem);
+    const randomize = elem.hasAttribute('data-randomize');
+
+    // do nothing if no swiper elements
+    if (!swiperWrapper || !swiperWrapper.firstChild || !swiperContainer) {
+      return;
+    }
 
-      createCardCarousel(el, dispatchesSwiperConfig);
+    if (randomize) {
+      randomizeChildren(swiperWrapper);
     }
-  );
+
+    return new Swiper(swiperContainer, swiperConfig);
+  }
+
+  createCardCarousel(el, dispatchesSwiperConfig);
 });
diff --git a/src/js/journey-swiper.ts b/src/js/journey-swiper.ts
@@ -1,5 +1,7 @@
 import { $, $$, checkElement } from './utils/dom';
 import VideoSwap from './video';
+import Swiper from 'swiper';
+import { Navigation, A11y, Pagination, HashNavigation } from 'swiper/modules';
 import lozad from 'lozad';
 import anime from 'animejs';
 
@@ -56,87 +58,80 @@ class JourneySwiper {
     this.addListeners();
   }
 
-  async getSwiper() {
-    return import(/* webpackChunkName: "swiper" */ 'swiper')
-      .then(
-        ({ default: Swiper, Navigation, A11y, Pagination, HashNavigation }) => {
-          this.loadingEls.forEach((el) => el.classList.add('has-loaded'));
-
-          this.swiperEl = new Swiper(this.swiperClass, {
-            modules: [Navigation, Pagination, HashNavigation, A11y],
-            autoHeight: true,
-            hashNavigation: {
-              replaceState: true,
-              watchState: true
-            },
-            navigation: {
-              nextEl: '.js-journey-next-button',
-              prevEl: '.js-journey-prev-button'
-            },
-            pagination: {
-              el: this.paginationClass,
-              bulletClass: 'journey-modal__cb-link',
-              clickable: true,
-              renderBullet: function (index, className) {
-                const labels = [
-                  'Why Middlebury',
-                  'Immersive Environments',
-                  'The Undergraduate Experience',
-                  'Alumni in the World',
-                  'Middlebury in the News',
-                  'Students in Action',
-                  'Connected Middlebury',
-                  'Middlebury College',
-                  'Graduate and Professional Schools'
-                ];
-                return `
-                  <a class="journey-modal__cb-link ${className}" href="#" role="button">
-                    <span class="cb-link__text">
-                      ${labels[index]}
-                    </span>
-                    <span class="cb-link__circle-wrapper">
-                      <span class="cb-link__circle inner"></span>
-                      <span class="cb-link__circle outer"></span>
-                    </span>
-                  </a>`;
-              }
-            },
-            on: {
-              slideNextTransitionStart: (swiper) => {
-                swiper.allowSlideNext = false;
-              },
-              slideNextTransitionEnd: (swiper) => {
-                swiper.allowSlideNext = true;
-              },
-              slidePrevTransitionStart: (swiper) => {
-                swiper.allowSlidePrev = false;
-              },
-              slidePrevTransitionEnd: (swiper) => {
-                swiper.allowSlidePrev = true;
-              },
-              transitionStart: () => {
-                this.swiperUpdate();
-                this.scrollToTop();
-              }
-            }
-          });
+  getSwiper() {
+    this.loadingEls.forEach((el) => el.classList.add('has-loaded'));
+
+    this.swiperEl = new Swiper(this.swiperClass, {
+      modules: [Navigation, Pagination, HashNavigation, A11y],
+      autoHeight: true,
+      hashNavigation: {
+        replaceState: true,
+        watchState: true
+      },
+      navigation: {
+        nextEl: '.js-journey-next-button',
+        prevEl: '.js-journey-prev-button'
+      },
+      pagination: {
+        el: this.paginationClass,
+        bulletClass: 'journey-modal__cb-link',
+        clickable: true,
+        renderBullet: function (index, className) {
+          const labels = [
+            'Why Middlebury',
+            'Immersive Environments',
+            'The Undergraduate Experience',
+            'Alumni in the World',
+            'Middlebury in the News',
+            'Students in Action',
+            'Connected Middlebury',
+            'Middlebury College',
+            'Graduate and Professional Schools'
+          ];
+          return `
+            <a class="journey-modal__cb-link ${className}" href="#" role="button">
+              <span class="cb-link__text">
+                ${labels[index]}
+              </span>
+              <span class="cb-link__circle-wrapper">
+                <span class="cb-link__circle inner"></span>
+                <span class="cb-link__circle outer"></span>
+              </span>
+            </a>`;
+        }
+      },
+      on: {
+        slideNextTransitionStart: (swiper) => {
+          swiper.allowSlideNext = false;
+        },
+        slideNextTransitionEnd: (swiper) => {
+          swiper.allowSlideNext = true;
+        },
+        slidePrevTransitionStart: (swiper) => {
+          swiper.allowSlidePrev = false;
+        },
+        slidePrevTransitionEnd: (swiper) => {
+          swiper.allowSlidePrev = true;
+        },
+        transitionStart: () => {
+          this.swiperUpdate();
+          this.scrollToTop();
         }
-      )
-      .catch((error) => 'An error occurred while loading Swiper');
+      }
+    });
   }
 
   swiperInit() {
-    this.getSwiper().then(() => {
-      this.closeBtn.focus();
-      // init lazy loaded gallery images
-      const lazyGalleryImages = lozad('[data-journey-gallery-item] img');
-      lazyGalleryImages.observe();
+    this.getSwiper();
+    this.closeBtn.focus();
+    // init lazy loaded gallery images
+    const lazyGalleryImages = lozad('[data-journey-gallery-item] img');
+    lazyGalleryImages.observe();
 
-      this.swiperParentEl.style.transform = `translateX(${this.translate}px)`;
+    this.swiperParentEl.style.transform = `translateX(${this.translate}px)`;
 
-      // Initialize video elements with VideoSwap class to enable showing/hiding videos
-      this.initVideoElems();
-    });
+    // Initialize video elements with VideoSwap class to enable showing/hiding videos
+    this.initVideoElems();
   }
 
   addListeners() {