feat: get rid of direct rxjs dependency

Use DestroyRef instead. Angular itself still use RxJs but it's good not to be limited by RxJs's version.
daelmaak · Aug 5, 2023 · 8f50899 · 8f50899
1 parent ac897bc
commit 8f50899
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/projects/gallery/package.json b/projects/gallery/package.json
@@ -33,7 +33,6 @@
     "@angular/animations": ">=16.0.0",
     "@angular/common": ">=16.0.0",
     "@angular/core": ">=16.0.0",
-    "@angular/platform-browser": ">=16.0.0",
-    "rxjs": ">=6.6.0"
+    "@angular/platform-browser": ">=16.0.0"
   }
 }
diff --git a/projects/gallery/src/lib/components/viewer/viewer.component.simple.spec.ts b/projects/gallery/src/lib/components/viewer/viewer.component.simple.spec.ts
@@ -6,7 +6,7 @@ describe('ViewerComponent', () => {
   let viewer: ViewerComponent;
 
   beforeEach(() => {
-    viewer = new ViewerComponent(null, null, null);
+    viewer = new ViewerComponent(null, null, null, null);
     viewer.items = [
       { src: 'src1' },
       { src: 'src2' },
@@ -184,7 +184,7 @@ describe('ViewerComponent', () => {
       changeDetector = jasmine.createSpyObj('changeDetectorRef', [
         'detectChanges',
       ]);
-      viewer = new ViewerComponent(null, changeDetector, null);
+      viewer = new ViewerComponent(null, changeDetector, null, null);
       viewer.items = [{ src: 'src1' }, { src: 'src2' }];
     });
 

diff --git a/projects/gallery/src/lib/components/viewer/viewer.component.ts b/projects/gallery/src/lib/components/viewer/viewer.component.ts
@@ -1,15 +1,16 @@
 import { animate, style, transition, trigger } from '@angular/animations';
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   EventEmitter,
   HostBinding,
   Input,
   NgZone,
   OnChanges,
-  OnDestroy,
   OnInit,
   Output,
   QueryList,
@@ -18,26 +19,23 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core';
-import { fromEvent, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import {
   Aria,
   ContentTemplateContext,
   GalleryItemEvent,
-  isBrowser,
   ItemTemplateContext,
   Loading,
   ObjectFit,
   OrientationFlag,
   UA,
   VerticalOrientation,
+  isBrowser,
 } from '../../core';
 import { GalleryItemInternal } from '../../core/gallery-item';
+import { MediaDirective } from '../../directives/media.directive';
+import { SafePipe } from '../../pipes/safe.pipe';
 import { CounterComponent } from '../counter/counter.component';
 import { ChevronIconComponent } from '../icons/chevron/chevron-icon.component';
-import { SafePipe } from '../../pipes/safe.pipe';
-import { CommonModule } from '@angular/common';
-import { MediaDirective } from '../../directives/media.directive';
 
 const passiveEventListenerOpts = {
   passive: true,
@@ -66,7 +64,7 @@ const passiveEventListenerOpts = {
     SafePipe,
   ],
 })
-export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
+export class ViewerComponent implements OnChanges, OnInit {
   @Input() items: GalleryItemInternal[];
   @Input() arrows: boolean;
   @Input() selectedIndex: number;
@@ -113,7 +111,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
 
   _displayedItems: GalleryItemInternal[];
   _fringeCount: number;
-  private _destroy$ = new Subject();
   private _itemWidth: number;
   private _loop: boolean;
   private _viewerWidth: number;
@@ -147,6 +144,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
   constructor(
     private _hostRef: ElementRef<HTMLElement>,
     private _cd: ChangeDetectorRef,
+    private _destroyRef: DestroyRef,
     private _zone: NgZone
   ) {}
 
@@ -180,11 +178,6 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy() {
-    this._destroy$.next(null);
-    this._destroy$.complete();
-  }
-
   isInScrollportProximity(index: number) {
     if (this.loop) {
       index -= this._fringeCount;
@@ -372,7 +365,8 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
       );
       hostEl.addEventListener('click', onclick, { capture: true });
       hostEl.addEventListener('dragstart', ondragstart);
-      this._destroy$.subscribe(() => {
+
+      this._destroyRef.onDestroy(() => {
         hostEl.removeEventListener('mousedown', onmousedown);
         hostEl.removeEventListener('click', onclick);
         hostEl.removeEventListener('dragstart', ondragstart);
@@ -447,7 +441,7 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
         ontouchend,
         passiveEventListenerOpts
       );
-      this._destroy$.subscribe(() => {
+      this._destroyRef.onDestroy(() => {
         hostEl.removeEventListener('touchstart', ontouchstart);
         document.removeEventListener('touchmove', ontouchmove);
         document.removeEventListener('touchend', ontouchend);
@@ -456,9 +450,11 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
   }
 
   private handleResizes() {
-    fromEvent(window, 'resize', passiveEventListenerOpts)
-      .pipe(takeUntil(this._destroy$))
-      .subscribe(this.onResize);
+    window.addEventListener('resize', this.onResize, passiveEventListenerOpts);
+
+    this._destroyRef.onDestroy(() => {
+      window.removeEventListener('resize', this.onResize);
+    });
   }
 
   private loopTo(desiredIndex: number) {