perf: replace swiper.js by glide.js

angular.json

@@ -53,16 +53,9 @@
               "src/site.webmanifest"
             ],
             "stylePreprocessorOptions": {
-              "includePaths": ["src/sass"]
+              "includePaths": ["src/sass", "node_modules"]
             },
-            "styles": [
-              "src/styles.scss",
-              {
-                "input": "src/swiper.scss",
-                "inject": false,
-                "bundleName": "swiper"
-              }
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": [],
             "browser": "src/main.ts",
             "server": "src/main.server.ts",
@@ -133,16 +126,9 @@
               "src/site.webmanifest"
             ],
             "stylePreprocessorOptions": {
-              "includePaths": ["src/sass"]
+              "includePaths": ["src/sass", "node_modules"]
             },
-            "styles": [
-              "src/styles.scss",
-              {
-                "input": "src/swiper.scss",
-                "inject": false,
-                "bundleName": "swiper"
-              }
-            ],
+            "styles": ["src/styles.scss"],
             "scripts": []
           }
         },

lighthouserc.js

@@ -24,6 +24,8 @@ module.exports = {
         // Just happens on project detail page tho, when many swipers there
         // Maybe a grid would solve it
         'non-composited-animations': 'warn',
+        // 👇 Most images don't have an alt text
+        'image-alt': 'off',
         'bf-cache': 'warn',
         'csp-xss': 'warn',
         'unused-javascript': 'warn',

package.json

@@ -19,7 +19,7 @@
     "lint-staged": "lint-staged",
     "git-hooks": "husky",
     "cms-server": "npx decap-server",
-    "analyze-main-bundle": "ng build --source-map && npx source-map-explorer dist/chrislb/browser/main.*.js",
+    "analyze-main-bundle": "ng build --source-map && npx source-map-explorer dist/chrislb/browser/main*.js",
     "generate": "tsm scripts/src/generators/all-generators.ts",
     "generate:images-lists": "tsm scripts/src/generators/images-lists-generators.ts",
     "generate:contents": "tsm scripts/src/generators/content-generators.ts",
@@ -47,6 +47,8 @@
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@glidejs/glide": "^3.7.1",
+    "@types/glidejs__glide": "3.6.5",
     "@unpic/core": "1.0.0",
     "compression": "1.7.5",
     "express": "4.21.2",

src/app/projects/images-swiper-glidejs/images-swiper-glidejs.component.html

@@ -0,0 +1,64 @@
+<div class="glide">
+  <div class="glide__track" data-glide-el="track">
+    <div class="glide__slides">
+      @for (image of images(); track image) {
+        <div
+          class="glide__slide"
+          style="height: 100%; width: auto"
+          [style.aspect-ratio]="image.width / image.height"
+        >
+          <img
+            [ngSrc]="image.filePath"
+            [ngSrcset]="
+              responsiveImageAttributes().breakpoints.ngSrcSet.asString
+            "
+            [sizes]="responsiveImageAttributes().sizes.asString"
+            [priority]="priority() && $index < options().slidesPerView"
+            [attr.alt]="image.alt"
+            fill
+          />
+        </div>
+      }
+    </div>
+  </div>
+  <div class="glide__arrows" data-glide-el="controls">
+    <button
+      class="glide__arrow glide__arrow--left"
+      data-glide-dir="<"
+      aria-label="Previous"
+    >
+      <svg
+        width="11"
+        height="20"
+        viewBox="0 0 11 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z"
+          fill="currentColor"
+          transform-origin="center"
+          transform="rotate(180)"
+        ></path>
+      </svg>
+    </button>
+    <button
+      class="glide__arrow glide__arrow--right"
+      data-glide-dir=">"
+      aria-label="Next"
+    >
+      <svg
+        width="11"
+        height="20"
+        viewBox="0 0 11 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z"
+          fill="currentColor"
+        ></path>
+      </svg>
+    </button>
+  </div>
+</div>

src/app/projects/images-swiper-glidejs/images-swiper-glidejs.component.scss

@@ -0,0 +1,52 @@
+@use 'sass:color';
+@use 'theme';
+@import '@glidejs/glide/src/assets/sass/glide.core';
+@import '@glidejs/glide/src/assets/sass/glide.theme';
+
+.glide,
+.glide__slides,
+.glide__slide,
+.glide__track {
+  height: 100%;
+}
+
+.glide__slide {
+  //👇 NgOptimizedImage's `fill` sets position to absolute
+  position: relative;
+
+  img {
+    object-fit: contain;
+  }
+}
+
+//👇 Style from Swiper.js
+//   https://github.com/nolimits4web/swiper/blob/v11.2.1/src/modules/navigation/navigation.scss
+$arrow-height: 44px;
+$arrow-width: 27px;
+$arrow-gap: 10px;
+
+.glide__arrow {
+  // 👇 Override default styles
+  margin: 0;
+  padding: 0;
+  border: none;
+  box-shadow: none;
+
+  height: $arrow-height;
+  width: $arrow-width;
+  color: theme.$accent;
+}
+
+.glide__arrow--left {
+  left: $arrow-gap;
+}
+
+.glide__arrow--left {
+  right: $arrow-gap;
+}
+
+.glide__arrow svg {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

src/app/projects/images-swiper-glidejs/images-swiper-glidejs.component.spec.ts

@@ -0,0 +1,19 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { ImagesSwiperGlidejsComponent } from './images-swiper-glidejs.component'
+
+describe('ImagesSwiperGlidejsComponent', () => {
+  let component: ImagesSwiperGlidejsComponent
+  let fixture: ComponentFixture<ImagesSwiperGlidejsComponent>
+
+  beforeEach(async () => {
+    fixture = TestBed.createComponent(ImagesSwiperGlidejsComponent)
+    fixture.componentRef.setInput('images', [])
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

src/app/projects/images-swiper-glidejs/images-swiper-glidejs.component.ts

@@ -0,0 +1,56 @@
+import {
+  afterNextRender,
+  Component,
+  effect,
+  ElementRef,
+  Injector,
+  input,
+} from '@angular/core'
+import { ImageAsset } from '../../common/images/image-asset'
+import Glide from '@glidejs/glide'
+import { NgOptimizedImage } from '@angular/common'
+import { ResponsiveImageAttributes } from '../../common/images/responsive-image-attributes'
+
+@Component({
+  selector: 'app-images-swiper-glidejs',
+  standalone: true,
+  imports: [NgOptimizedImage],
+  templateUrl: './images-swiper-glidejs.component.html',
+  styleUrl: './images-swiper-glidejs.component.scss',
+})
+export class ImagesSwiperGlidejsComponent {
+  readonly images = input.required<readonly ImageAsset[]>()
+  readonly options = input.required<ImagesSwiperOptions>()
+  readonly responsiveImageAttributes =
+    input.required<ResponsiveImageAttributes>()
+  readonly priority = input(false)
+
+  constructor(elRef: ElementRef<HTMLElement>, injector: Injector) {
+    // TODO: Replace by afterRenderEffect. This is now a mix of
+    //        - https://stackoverflow.com/a/78272904
+    //        - https://stackoverflow.com/a/78327383
+    afterNextRender({
+      mixedReadWrite: () => {
+        const effectRef = effect(
+          () => {
+            if (this.images().length) {
+              new Glide(elRef.nativeElement, {
+                type: 'carousel',
+                perView: this.options().slidesPerView,
+                gap: 0,
+                peek: 0,
+                autoplay: 2500,
+              }).mount()
+            }
+            effectRef.destroy()
+          },
+          { injector, manualCleanup: true },
+        )
+      },
+    })
+  }
+}
+
+export interface ImagesSwiperOptions {
+  slidesPerView: number
+}

src/app/projects/project-page/project-page.component.html

@@ -22,15 +22,13 @@ <h2>{{ assetsCollection.data.name }}</h2>
         ></iframe>
       }
       @if (assetsCollection.type === AssetsCollectionType.Image) {
-        <app-images-swiper
+        <app-images-swiper-glidejs
           [images]="assetsCollection.images"
           [responsiveImageAttributes]="assetsCollection.swiperConfig.attributes"
-          [customSwiperOptions]="
-            assetsCollection.swiperConfig.customSwiperOptions
-          "
+          [options]="assetsCollection.swiperConfig.customOptions"
           [style.max-width.px]="assetsCollection.swiperConfig.maxWidth?.value"
           [priority]="index < _maxSwipersPerViewport"
-        ></app-images-swiper>
+        ></app-images-swiper-glidejs>
       }
     </div>
   }

src/app/projects/project-page/project-page.component.scss

@@ -23,7 +23,7 @@
     align-items: center;
     width: 100%;
 
-    > app-images-swiper {
+    > app-images-swiper-glidejs {
       width: 100%;
       //ℹ️ max-width set by component for big screens
     }

src/app/projects/project-page/project-page.component.ts

@@ -2,7 +2,6 @@ import { Component, effect, signal } from '@angular/core'
 import { catchError, map, of } from 'rxjs'
 import { NavigatorService } from '../../common/routing/navigator.service'
 import { ProjectAssetsCollectionsService } from './project-assets-collections.service'
-import { SwiperOptions } from 'swiper/types'
 import { AssetsCollectionData } from './assets-collection-data'
 import { AssetsCollectionSize } from './assets-collection-size'
 import { AssetsCollectionType } from './assets-collection-type'
@@ -17,16 +16,19 @@ import { ProjectRouteData } from './projects-routes-data'
 import { GlobalMetadata, NgxMetaService } from '@davidlj95/ngx-meta/core'
 import { getTitle } from '../../common/routing/get-title'
 import { SanitizeResourceUrlPipe } from '../sanitize-resource-url.pipe'
-import { ImagesSwiperComponent } from '../images-swiper/images-swiper.component'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { AnyAssetsCollection } from './any-asset-collection'
+import {
+  ImagesSwiperGlidejsComponent,
+  ImagesSwiperOptions,
+} from '../images-swiper-glidejs/images-swiper-glidejs.component'
 
 @Component({
   selector: 'app-project-page',
   templateUrl: './project-page.component.html',
   styleUrls: ['./project-page.component.scss'],
   standalone: true,
-  imports: [ImagesSwiperComponent, SanitizeResourceUrlPipe],
+  imports: [SanitizeResourceUrlPipe, ImagesSwiperGlidejsComponent],
   providers: [ProjectAssetsCollectionsService],
 })
 export class ProjectPageComponent {
@@ -45,7 +47,7 @@ export class ProjectPageComponent {
     ImageAssetsSwiperConfig
   > = {
     [AssetsCollectionSize.Full]: {
-      customSwiperOptions: {
+      customOptions: {
         slidesPerView: FULL_SCREEN_SWIPER.slidesPerView,
       },
       attributes: this._responsiveImageAttributesService
@@ -63,7 +65,7 @@ export class ProjectPageComponent {
       maxWidth: FULL_SCREEN_SWIPER.maxWidth,
     },
     [AssetsCollectionSize.Half]: {
-      customSwiperOptions: {
+      customOptions: {
         slidesPerView: HALF_SCREEN_SWIPER.slidesPerView,
       },
       attributes: this._responsiveImageAttributesService
@@ -128,7 +130,7 @@ export class ProjectPageComponent {
 }
 
 interface ImageAssetsSwiperConfig {
-  readonly customSwiperOptions: SwiperOptions
+  readonly customOptions: ImagesSwiperOptions
   readonly attributes: ResponsiveImageAttributes
   readonly maxWidth?: CssPxUnit
 }