fix(lib): cleanup boundaries on destruction

Author: gund

projects/ngx-element-boundary/src/lib/boundary-sharing-strategy/boundary-sharing-strategy.ts

@@ -25,4 +25,9 @@ export abstract class BoundarySharingStrategy {
    * Add one {@link ElementBoundary}
    */
   abstract addBoundary(boundary: ElementBoundary): void;
+
+  /**
+   * Remove one {@link ElementBoundary}
+   */
+  abstract removeBoundary(boundary: ElementBoundary): void;
 }

projects/ngx-element-boundary/src/lib/boundary-sharing-strategy/global-boundary-sharing-strategy.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, ReplaySubject } from 'rxjs';
+import { Observable, ReplaySubject, BehaviorSubject } from 'rxjs';
 import { scan, shareReplay } from 'rxjs/operators';
 
 import { ElementBoundary } from '../types';
@@ -37,21 +37,14 @@ export class GlobalBoundarySharingStrategyOptions {
  */
 @Injectable({ providedIn: 'root' })
 export class GlobalBoundarySharingStrategy implements BoundarySharingStrategy {
-  private readonly addBoundary$ = this._boundary$;
-
-  private readonly boundaries$ = this.addBoundary$.pipe(
-    scan((acc, boundary) => [...acc, boundary], [] as ElementBoundary[]),
-    shareReplay({ bufferSize: 1, refCount: false }),
-  );
-
-  private get _boundary$(): ReplaySubject<ElementBoundary> {
+  private get boundaries$(): BehaviorSubject<ElementBoundary[]> {
     return (
       this.globalRef.global[this.options.propName] ||
-      (this._boundary$ = new ReplaySubject(1))
+      (this.boundaries$ = new BehaviorSubject<ElementBoundary[]>([]))
     );
   }
 
-  private set _boundary$(boundaries: ReplaySubject<ElementBoundary>) {
+  private set boundaries$(boundaries: BehaviorSubject<ElementBoundary[]>) {
     this.globalRef.global[this.options.propName] = boundaries;
   }
 
@@ -61,10 +54,28 @@ export class GlobalBoundarySharingStrategy implements BoundarySharingStrategy {
   ) {}
 
   getBoundaries(): Observable<ElementBoundary[]> {
-    return this.boundaries$;
+    return this.boundaries$.asObservable();
   }
 
   addBoundary(boundary: ElementBoundary): void {
-    this.addBoundary$.next(boundary);
+    const boundaries = this.boundaries$.getValue();
+
+    boundaries.push(boundary);
+
+    this.boundaries$.next(boundaries);
+  }
+
+  removeBoundary(boundary: ElementBoundary): void {
+    const boundaries = this.boundaries$.getValue();
+
+    const idx = boundaries.indexOf(boundary);
+
+    if (idx === -1) {
+      return;
+    }
+
+    boundaries.splice(idx, 1);
+
+    this.boundaries$.next(boundaries);
   }
 }

projects/ngx-element-boundary/src/lib/boundary-sharing-strategy/single-app-boundary-sharing-strategy.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, ReplaySubject } from 'rxjs';
-import { scan, shareReplay } from 'rxjs/operators';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import { ElementBoundary } from '../types';
 import { BoundarySharingStrategy } from './boundary-sharing-strategy';
@@ -11,18 +10,31 @@ import { BoundarySharingStrategy } from './boundary-sharing-strategy';
 @Injectable({ providedIn: 'root' })
 export class SingleAppBoundarySharingStrategy
   implements BoundarySharingStrategy {
-  private readonly addBoundary$ = new ReplaySubject<ElementBoundary>(Infinity);
-
-  private readonly boundaries$ = this.addBoundary$.pipe(
-    scan((acc, boundary) => [...acc, boundary], [] as ElementBoundary[]),
-    shareReplay({ bufferSize: 1, refCount: false }),
-  );
+  private readonly boundaries$ = new BehaviorSubject<ElementBoundary[]>([]);
 
   getBoundaries(): Observable<ElementBoundary[]> {
-    return this.boundaries$;
+    return this.boundaries$.asObservable();
   }
 
   addBoundary(boundary: ElementBoundary): void {
-    this.addBoundary$.next(boundary);
+    const boundaries = this.boundaries$.getValue();
+
+    boundaries.push(boundary);
+
+    this.boundaries$.next(boundaries);
+  }
+
+  removeBoundary(boundary: ElementBoundary): void {
+    const boundaries = this.boundaries$.getValue();
+
+    const idx = boundaries.indexOf(boundary);
+
+    if (idx === -1) {
+      return;
+    }
+
+    boundaries.splice(idx, 1);
+
+    this.boundaries$.next(boundaries);
   }
 }

projects/ngx-element-boundary/src/lib/cross-boundary-ng-element-strategy.ts

@@ -9,6 +9,7 @@ import {
 } from './element-boundary-ng-element-strategy';
 import { ElementBoundaryService } from './element-boundary.service';
 import { HookableInjector } from './hookable-injector';
+import { ElementBoundary } from './types';
 import { maybeLateInitStream } from './util';
 
 /**
@@ -82,6 +83,8 @@ export class CrossBoundaryNgElementStrategy implements NgElementStrategy {
     this.incomingOptions,
   );
 
+  private boundaryRef?: ElementBoundary;
+
   private disconnect$ = new Subject<void>();
 
   constructor(
@@ -108,6 +111,11 @@ export class CrossBoundaryNgElementStrategy implements NgElementStrategy {
   }
 
   disconnect(): void {
+    if (this.boundaryRef) {
+      this.elementBoundaryService.removeBoundary(this.boundaryRef);
+      this.boundaryRef = undefined;
+    }
+
     this.disconnect$.next();
     this.baseStrategy.disconnect();
   }
@@ -129,11 +137,14 @@ export class CrossBoundaryNgElementStrategy implements NgElementStrategy {
       return;
     }
 
-    this.elementBoundaryService.addBoundary({
+    // Store boundary to remove it later on disconnect
+    this.boundaryRef = {
       injector: componentRef.injector,
       element,
       isComponent: true,
-    });
+    };
+
+    this.elementBoundaryService.addBoundary(this.boundaryRef);
   }
 }
 

projects/ngx-element-boundary/src/lib/element-boundary.directive.ts

@@ -6,10 +6,12 @@ import {
   OnChanges,
   OnInit,
   SimpleChanges,
+  OnDestroy,
 } from '@angular/core';
 
 import { ElementBoundaryService } from './element-boundary.service';
 import { HookableInjector } from './hookable-injector';
+import { ElementBoundary } from './types';
 
 /**
  * Directive allows to specify contextual "element boundary"
@@ -25,24 +27,26 @@ import { HookableInjector } from './hookable-injector';
 @Directive({
   selector: '[nebElementBoundary]',
 })
-export class ElementBoundaryDirective implements OnInit, OnChanges {
+export class ElementBoundaryDirective implements OnInit, OnChanges, OnDestroy {
   /** Override default {@link Injector} */
   @Input() nebElementBoundary?: Injector;
 
   private hookableInjector = new HookableInjector(this.injector);
 
+  private boundaryRef: ElementBoundary = {
+    injector: this.hookableInjector,
+    element: this.elemRef.nativeElement,
+    isComponent: false,
+  };
+
   constructor(
     private injector: Injector,
     private elemRef: ElementRef,
     private elementBoundaryService: ElementBoundaryService,
   ) {}
 
   ngOnInit(): void {
-    this.elementBoundaryService.addBoundary({
-      injector: this.hookableInjector,
-      element: this.elemRef.nativeElement,
-      isComponent: false,
-    });
+    this.elementBoundaryService.addBoundary(this.boundaryRef);
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -54,4 +58,8 @@ export class ElementBoundaryDirective implements OnInit, OnChanges {
       }
     }
   }
+
+  ngOnDestroy(): void {
+    this.elementBoundaryService.removeBoundary(this.boundaryRef);
+  }
 }

projects/ngx-element-boundary/src/lib/element-boundary.service.ts

@@ -39,6 +39,13 @@ export class ElementBoundaryService {
     this.boundarySharingStrategy.addBoundary(boundary);
   }
 
+  /**
+   * Unregister "element boundary"
+   */
+  removeBoundary(boundary: ElementBoundary): void {
+    this.boundarySharingStrategy.removeBoundary(boundary);
+  }
+
   /**
    * Wait until appropriate "element boundary" exists for HTML Element
    */