refactor: use native swiper instead of ngx-swiper-wrapper (#552)

Author: dhhyi

angular.json

@@ -66,9 +66,9 @@
                 {
                   "type": "bundle",
                   "name": "vendor",
-                  "baseline": "1mb",
-                  "warning": "200kb",
-                  "error": "500kb"
+                  "baseline": "900kb",
+                  "warning": "100kb",
+                  "error": "300kb"
                 },
                 {
                   "type": "initial",

docs/guides/migrations.md

@@ -13,6 +13,8 @@ We removed the property `production` from Angular CLI `environment.ts` files.
 Production mode can now consistently be set by using Angular CLI configurations.
 This also works when running multiple configurations like `--configuration=brand,production`.
 
+We removed the dependency `ngx-swiper-wrapper` as it will [no longer be supported](https://github.com/zefoy/ngx-swiper-wrapper#eol-notice) and `swiper` now [natively supports](https://swiperjs.com/angular) Angular.
+
 ## 0.26 to 0.27
 
 We upgraded Cypress from Version 4 to 6 and followed all migrations in their [Migration Guide](https://docs.cypress.io/guides/references/migration-guide.html).

package-lock.json

@@ -89,12 +89,11 @@
     "morgan": "^1.10.0",
     "ng-recaptcha": "^6.1.0",
     "ngx-infinite-scroll": "^10.0.0",
-    "ngx-swiper-wrapper": "^10.0.0",
     "ngx-toastr": "^13.2.0",
     "ngx-utils-cookies-port": "^1.0.1",
     "prom-client": "^12.0.0",
     "rxjs": "~6.6.3",
-    "swiper": "^6.3.5",
+    "swiper": "^6.4.12",
     "tslib": "^2.0.3",
     "typeface-roboto": "1.1.13",
     "typeface-roboto-condensed": "1.1.13",

package.json

@@ -1,19 +1,10 @@
 import { NgModule } from '@angular/core';
 import { NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap';
-import { SWIPER_CONFIG, SwiperConfigInterface } from 'ngx-swiper-wrapper';
 import { ToastrModule } from 'ngx-toastr';
 
 import { IconModule } from './icon.module';
 import { ThemeService } from './utils/theme/theme.service';
 
-const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
-  direction: 'horizontal',
-  keyboard: true,
-  mousewheel: false,
-  navigation: true,
-  scrollbar: false,
-};
-
 @NgModule({
   imports: [
     IconModule,
@@ -24,7 +15,6 @@ const DEFAULT_SWIPER_CONFIG: SwiperConfigInterface = {
       preventDuplicates: true,
     }),
   ],
-  providers: [{ provide: SWIPER_CONFIG, useValue: DEFAULT_SWIPER_CONFIG }],
 })
 export class AppearanceModule {
   constructor(popoverConfig: NgbPopoverConfig, themeService: ThemeService) {

src/app/core/appearance.module.ts

@@ -5,14 +5,17 @@ <h3>{{ 'account.wishlists.widget.heading' | translate }}</h3>
       <div class="product-list">
         <swiper [config]="swiperConfig">
           <div *ngFor="let sku of itemSku" class="swiper-slide">
-            <ish-product-item
-              displayType="tile"
-              ishProductContext
-              [sku]="sku"
-              [configuration]="tileConfiguration"
-            ></ish-product-item>
+            <ng-template swiperSlide>
+              <ish-product-item
+                displayType="tile"
+                ishProductContext
+                [sku]="sku"
+                [configuration]="tileConfiguration"
+              ></ish-product-item>
+            </ng-template>
           </div>
         </swiper>
+        <div class="swiper-pagination"></div>
       </div>
     </ng-container>
     <ng-template #noItems>

src/app/extensions/wishlists/shared/wishlist-widget/wishlist-widget.component.html

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent, MockDirective } from 'ng-mocks';
-import { SwiperModule } from 'ngx-swiper-wrapper';
 import { EMPTY } from 'rxjs';
+import { SwiperComponent } from 'swiper/angular';
 import { instance, mock, when } from 'ts-mockito';
 
 import { ProductContextDirective } from 'ish-core/directives/product-context.directive';
@@ -24,10 +24,11 @@ describe('Wishlist Widget Component', () => {
     await TestBed.configureTestingModule({
       declarations: [
         MockComponent(ProductItemComponent),
+        MockComponent(SwiperComponent),
         MockDirective(ProductContextDirective),
         WishlistWidgetComponent,
       ],
-      imports: [SwiperModule, TranslateModule.forRoot()],
+      imports: [TranslateModule.forRoot()],
       providers: [{ provide: WishlistsFacade, useFactory: () => instance(wishlistFacadeMock) }],
     }).compileComponents();
   });

src/app/extensions/wishlists/shared/wishlist-widget/wishlist-widget.component.spec.ts

@@ -1,13 +1,16 @@
 import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
-import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
 import { Observable } from 'rxjs';
+import { SwiperOptions } from 'swiper';
+import SwiperCore, { Navigation, Pagination } from 'swiper/core';
 
-import { LARGE_BREAKPOINT_WIDTH } from 'ish-core/configurations/injection-keys';
+import { LARGE_BREAKPOINT_WIDTH, MEDIUM_BREAKPOINT_WIDTH } from 'ish-core/configurations/injection-keys';
 import { ProductContextDisplayProperties } from 'ish-core/facades/product-context.facade';
 import { GenerateLazyComponent } from 'ish-core/utils/module-loader/generate-lazy-component.decorator';
 
 import { WishlistsFacade } from '../../facades/wishlists.facade';
 
+SwiperCore.use([Navigation, Pagination]);
+
 /**
  * The Wishlist Widget Component displays all unique items from all wish lists.
  */
@@ -20,15 +23,19 @@ import { WishlistsFacade } from '../../facades/wishlists.facade';
 export class WishlistWidgetComponent implements OnInit {
   allWishlistsItemsSkus$: Observable<string[]>;
   itemsPerSlide = 4;
+  tileConfiguration: Partial<ProductContextDisplayProperties>;
+
   /**
    * configuration of swiper carousel
    * find possible parameters here: http://idangero.us/swiper/api/#parameters
    */
-  swiperConfig: SwiperConfigInterface;
+  swiperConfig: SwiperOptions;
 
-  tileConfiguration: Partial<ProductContextDisplayProperties>;
-
-  constructor(private wishlistsFacade: WishlistsFacade, @Inject(LARGE_BREAKPOINT_WIDTH) largeBreakpointWidth: number) {
+  constructor(
+    private wishlistsFacade: WishlistsFacade,
+    @Inject(LARGE_BREAKPOINT_WIDTH) largeBreakpointWidth: number,
+    @Inject(MEDIUM_BREAKPOINT_WIDTH) mediumBreakpointWidth: number
+  ) {
     this.tileConfiguration = {
       addToWishlist: false,
       addToOrderTemplate: false,
@@ -37,7 +44,20 @@ export class WishlistWidgetComponent implements OnInit {
     };
 
     this.swiperConfig = {
+      direction: 'horizontal',
+      keyboard: true,
+      mousewheel: false,
+      navigation: true,
+      scrollbar: false,
       breakpoints: {
+        0: {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+        },
+        [mediumBreakpointWidth]: {
+          slidesPerView: 3,
+          slidesPerGroup: 3,
+        },
         [largeBreakpointWidth]: {
           slidesPerView: 4,
           slidesPerGroup: 4,
@@ -48,8 +68,6 @@ export class WishlistWidgetComponent implements OnInit {
         clickable: true,
         clickableClass: 'swiper-pagination-clickable',
       },
-      slidesPerView: 2,
-      slidesPerGroup: 2,
     };
   }
 

src/app/extensions/wishlists/shared/wishlist-widget/wishlist-widget.component.ts

@@ -4,8 +4,11 @@ <h2>{{ productLinkTitle }}</h2>
   <div class="product-list">
     <swiper [config]="swiperConfig">
       <div *ngFor="let sku of links.products" class="swiper-slide">
-        <ish-product-item ishProductContext [sku]="sku"></ish-product-item>
+        <ng-template swiperSlide>
+          <ish-product-item ishProductContext [sku]="sku"></ish-product-item>
+        </ng-template>
       </div>
     </swiper>
+    <div class="swiper-pagination"></div>
   </div>
 </div>

src/app/pages/product/product-links-carousel/product-links-carousel.component.html

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MockComponent, MockDirective } from 'ng-mocks';
-import { SwiperModule } from 'ngx-swiper-wrapper';
+import { SwiperComponent } from 'swiper/angular';
 
 import { ProductContextDirective } from 'ish-core/directives/product-context.directive';
 import { ProductLinks } from 'ish-core/models/product-links/product-links.model';
@@ -15,9 +15,9 @@ describe('Product Links Carousel Component', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [SwiperModule],
       declarations: [
         MockComponent(ProductItemComponent),
+        MockComponent(SwiperComponent),
         MockDirective(ProductContextDirective),
         ProductLinksCarouselComponent,
       ],
@@ -38,10 +38,5 @@ describe('Product Links Carousel Component', () => {
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
     expect(element.querySelector('swiper')).toBeTruthy();
-    expect(element.querySelector('swiper .swiper-slide')).toMatchInlineSnapshot(`
-      <div class="swiper-slide">
-        <ish-product-item ishproductcontext="" ng-reflect-sku="sku"></ish-product-item>
-      </div>
-    `);
   });
 });

src/app/pages/product/product-links-carousel/product-links-carousel.component.spec.ts

@@ -1,8 +1,12 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
+import { ChangeDetectionStrategy, Component, Inject, Input } from '@angular/core';
+import { SwiperOptions } from 'swiper';
+import SwiperCore, { Navigation, Pagination } from 'swiper/core';
 
+import { LARGE_BREAKPOINT_WIDTH, MEDIUM_BREAKPOINT_WIDTH } from 'ish-core/configurations/injection-keys';
 import { ProductLinks } from 'ish-core/models/product-links/product-links.model';
 
+SwiperCore.use([Navigation, Pagination]);
+
 /**
  * The Product Link Carousel Component
  *
@@ -26,8 +30,42 @@ export class ProductLinksCarouselComponent {
    * title that should displayed for the specific product link type
    */
   @Input() productLinkTitle: string;
+
   /**
-   * configuration for swiper carousel
+   * configuration of swiper carousel
+   * find possible parameters here: http://idangero.us/swiper/api/#parameters
    */
-  @Input() swiperConfig: SwiperConfigInterface;
+  swiperConfig: SwiperOptions;
+
+  constructor(
+    @Inject(LARGE_BREAKPOINT_WIDTH) largeBreakpointWidth: number,
+    @Inject(MEDIUM_BREAKPOINT_WIDTH) mediumBreakpointWidth: number
+  ) {
+    this.swiperConfig = {
+      direction: 'horizontal',
+      keyboard: true,
+      mousewheel: false,
+      navigation: true,
+      scrollbar: false,
+      breakpoints: {
+        0: {
+          slidesPerView: 2,
+          slidesPerGroup: 2,
+        },
+        [mediumBreakpointWidth]: {
+          slidesPerView: 3,
+          slidesPerGroup: 3,
+        },
+        [largeBreakpointWidth]: {
+          slidesPerView: 4,
+          slidesPerGroup: 4,
+        },
+      },
+      pagination: {
+        el: '.swiper-pagination',
+        clickable: true,
+        clickableClass: 'swiper-pagination-clickable',
+      },
+    };
+  }
 }

src/app/pages/product/product-links-carousel/product-links-carousel.component.ts

@@ -15,42 +15,36 @@
     <ish-product-links-carousel
       [links]="links.crossselling"
       [productLinkTitle]="'product.product_links.crossselling.title' | translate"
-      [swiperConfig]="swiperConfig"
     ></ish-product-links-carousel>
   </ng-container>
   <ng-container *ngIf="links.accessory?.products?.length">
     <ish-product-links-carousel
       [links]="links.accessory"
       [productLinkTitle]="'product.product_links.accessory.title' | translate"
-      [swiperConfig]="swiperConfig"
     ></ish-product-links-carousel>
   </ng-container>
   <ng-container *ngIf="links.differentorderunit?.products?.length">
     <ish-product-links-carousel
       [links]="links.differentorderunit"
       [productLinkTitle]="'product.product_links.differentorderunit.title' | translate"
-      [swiperConfig]="swiperConfig"
     ></ish-product-links-carousel>
   </ng-container>
   <ng-container *ngIf="links.followup?.products?.length">
     <ish-product-links-carousel
       [links]="links.followup"
       [productLinkTitle]="'product.product_links.followup.title' | translate"
-      [swiperConfig]="swiperConfig"
     ></ish-product-links-carousel>
   </ng-container>
   <ng-container *ngIf="links.other?.products?.length">
     <ish-product-links-carousel
       [links]="links.other"
       [productLinkTitle]="'product.product_links.other.title' | translate"
-      [swiperConfig]="swiperConfig"
     ></ish-product-links-carousel>
   </ng-container>
   <ng-container *ngIf="links.replacement?.products?.length">
     <ish-product-links-carousel
       [links]="links.replacement"
       [productLinkTitle]="'product.product_links.replacement.title' | translate"
-      [swiperConfig]="swiperConfig"
     ></ish-product-links-carousel>
   </ng-container>
 </ng-container>