refactor: replaced unsubscribe mechanism with DestroyRef

Author: sergeleger

packages/studio-web/src/app/app.component.ts

@@ -1,16 +1,17 @@
-import { Subject, takeUntil } from "rxjs";
 import { MatDialogRef, MatDialog } from "@angular/material/dialog";
-import { Component, OnDestroy, OnInit, signal } from "@angular/core";
+import { Component, DestroyRef, inject, OnInit, signal } from "@angular/core";
 import { environment } from "../environments/environment";
 import { Router } from "@angular/router";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.sass"],
   standalone: false,
 })
-export class AppComponent implements OnDestroy, OnInit {
-  unsubscribe$ = new Subject<void>();
+export class AppComponent implements OnInit {
+  private destroyRef$ = inject(DestroyRef);
   version = environment.packageJson.singleFileBundleVersion;
   currentURL = signal("/");
   languages: (typeof environment)["languages"];
@@ -26,11 +27,13 @@ export class AppComponent implements OnDestroy, OnInit {
   }
 
   ngOnInit(): void {
-    this.router.events.pipe(takeUntil(this.unsubscribe$)).subscribe((event) => {
-      if (event.type === 1) {
-        this.currentURL.set(event.url);
-      }
-    });
+    this.router.events
+      .pipe(takeUntilDestroyed(this.destroyRef$))
+      .subscribe((event) => {
+        if (event.type === 1) {
+          this.currentURL.set(event.url);
+        }
+      });
   }
 
   openPrivacyDialog(): void {
@@ -45,13 +48,6 @@ export class AppComponent implements OnDestroy, OnInit {
   switchLanguage(url: string) {
     window.open(url, "_blank");
   }
-
-  ngOnDestroy(): void {
-    this.unsubscribe$.next();
-    this.unsubscribe$.complete();
-  }
-
-  ngAfterViewInit() {}
 }
 
 @Component({

packages/studio-web/src/app/demo/demo.component.ts

@@ -1,5 +1,3 @@
-import { Subject } from "rxjs";
-
 import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { Components } from "@readalongs/web-component/loader";
 
@@ -8,7 +6,7 @@ import { StudioService } from "../studio/studio.service";
 import { DownloadService } from "../shared/download/download.service";
 import { SupportedOutputs } from "../ras.service";
 import { ToastrService } from "ngx-toastr";
-import { WcStylingService } from "../shared/wc-styling/wc-styling.service";
+
 @Component({
   selector: "app-demo",
   templateUrl: "./demo.component.html",
@@ -18,7 +16,7 @@ import { WcStylingService } from "../shared/wc-styling/wc-styling.service";
 export class DemoComponent implements OnDestroy, OnInit {
   @ViewChild("readalong") readalong!: Components.ReadAlong;
   language: "eng" | "fra" | "spa" = "eng";
-  unsubscribe$ = new Subject<void>();
+
   constructor(
     public b64Service: B64Service,
     public studioService: StudioService,
@@ -56,8 +54,6 @@ export class DemoComponent implements OnDestroy, OnInit {
   }
 
   async ngOnDestroy() {
-    this.unsubscribe$.next();
-    this.unsubscribe$.complete();
     // Save translations, images and all other edits to the studio service when we exit
     if (this.studioService.b64Inputs$.value[1]) {
       await this.downloadService.updateTranslations(

packages/studio-web/src/app/editor/editor.component.ts

@@ -1,10 +1,12 @@
 import WaveSurfer from "wavesurfer.js";
 
-import { takeUntil, Subject, take, fromEvent, debounceTime } from "rxjs";
+import { take, fromEvent, debounceTime } from "rxjs";
 import {
   AfterViewInit,
   Component,
+  DestroyRef,
   ElementRef,
+  inject,
   OnDestroy,
   OnInit,
   ViewChild,
@@ -33,6 +35,8 @@ import { ToastrService } from "ngx-toastr";
 import { validateFileType } from "../utils/utils";
 import { WcStylingService } from "../shared/wc-styling/wc-styling.service";
 import { WcStylingComponent } from "../shared/wc-styling/wc-styling.component";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+
 @Component({
   selector: "app-editor",
   templateUrl: "./editor.component.html",
@@ -56,7 +60,7 @@ export class EditorComponent implements OnDestroy, AfterViewInit {
   // a comma separated list of file extensions or mime types.
   htmlUploadAccepts = ".html";
 
-  unsubscribe$ = new Subject<void>();
+  private destroyRef$ = inject(DestroyRef);
   rasFileIsLoaded = false;
 
   private beforeUnload: (e: Event) => void;
@@ -77,7 +81,7 @@ export class EditorComponent implements OnDestroy, AfterViewInit {
       this.addWCCustomFont(font),
     );
     fromEvent(window, "resize")
-      .pipe(debounceTime(100), takeUntil(this.unsubscribe$)) // wait for 1 second after the last resize event
+      .pipe(debounceTime(100), takeUntilDestroyed(this.destroyRef$)) // wait for 1 second after the last resize event
       .subscribe(() => {
         // When the window is resized, we want to reset the style window size
         // so that it does not get squeezed too small
@@ -166,7 +170,7 @@ export class EditorComponent implements OnDestroy, AfterViewInit {
     }
     if (this.handleElement) {
       fromEvent(this.handleElement.nativeElement, "dragend")
-        .pipe(takeUntil(this.unsubscribe$))
+        .pipe(takeUntilDestroyed(this.destroyRef$))
         .subscribe((event) => {
           const ev = event as DragEvent;
           console.log("[DEBUG] dragged");
@@ -353,13 +357,15 @@ export class EditorComponent implements OnDestroy, AfterViewInit {
       const currentWord$ = await this.readalong.getCurrentWord();
       const alignments = await this.readalong.getAlignments();
       // Subscribe to the current word of the readalong and center the wavesurfer element on it
-      currentWord$.pipe(takeUntil(this.unsubscribe$)).subscribe((word) => {
-        if (word) {
-          this.wavesurfer.seekAndCenter(
-            alignments[word][0] / 1000 / this.wavesurfer.getDuration(),
-          );
-        }
-      });
+      currentWord$
+        .pipe(takeUntilDestroyed(this.destroyRef$))
+        .subscribe((word) => {
+          if (word) {
+            this.wavesurfer.seekAndCenter(
+              alignments[word][0] / 1000 / this.wavesurfer.getDuration(),
+            );
+          }
+        });
     }
   }
 
@@ -518,7 +524,7 @@ export class EditorComponent implements OnDestroy, AfterViewInit {
     readalong_editor_choose_file["buttons"][1]["action"] = () => {
       this.fileService
         .returnFileFromPath$("assets/hello-world.offline.html")
-        .pipe(takeUntil(this.unsubscribe$))
+        .pipe(takeUntilDestroyed(this.destroyRef$))
         .subscribe(async (indexFile) => {
           await this.loadRasFile(indexFile);
           this.shepherdService.next();

packages/studio-web/src/app/shared/download/download.service.ts

@@ -1,6 +1,5 @@
-import { Injectable } from "@angular/core";
+import { DestroyRef, inject, Injectable } from "@angular/core";
 import { HttpErrorResponse } from "@angular/common/http";
-import { Observable, Subject, takeUntil } from "rxjs";
 import { slugify } from "../../utils/utils";
 import { UploadService } from "../../upload.service";
 import { ToastrService } from "ngx-toastr";
@@ -18,6 +17,7 @@ import {
 } from "../../ras.service";
 import { Components } from "@readalongs/web-component/loader";
 import { WcStylingService } from "../wc-styling/wc-styling.service";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 interface Image {
   path: string;
@@ -28,7 +28,7 @@ interface Image {
   providedIn: "root",
 })
 export class DownloadService {
-  unsubscribe$ = new Subject<void>();
+  private destroyRef$ = inject(DestroyRef);
   xmlSerializer = new XMLSerializer();
   readmeFile = new Blob(
     [
@@ -483,7 +483,7 @@ Use the text editor to paste the snippet below in your WordPress page:
           },
           selectedOutputFormat,
         )
-        .pipe(takeUntil(this.unsubscribe$))
+        .pipe(takeUntilDestroyed(this.destroyRef$))
         .subscribe({
           next: (x: Blob) => saveAs(x, `${basename}.${selectedOutputFormat}`),
           error: (err: HttpErrorResponse) => this.reportRasError(err),

packages/studio-web/src/app/shared/wc-styling/wc-styling.component.ts

@@ -1,7 +1,8 @@
 import {
   Component,
+  DestroyRef,
   ElementRef,
-  OnDestroy,
+  inject,
   OnInit,
   ViewChild,
 } from "@angular/core";
@@ -15,18 +16,19 @@ import {
 } from "@angular/material/dialog";
 import { B64Service } from "../../b64.service";
 import { MatButtonModule } from "@angular/material/button";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 @Component({
   selector: "app-wc-styling",
   templateUrl: "./wc-styling.component.html",
   styleUrl: "./wc-styling.component.sass",
   standalone: false,
 })
-export class WcStylingComponent implements OnDestroy, OnInit {
+export class WcStylingComponent implements OnInit {
   styleText$ = new BehaviorSubject<string>("");
   fontDeclaration$ = new BehaviorSubject<string>("");
   inputType = "edit";
-  unsubscribe$ = new Subject<void>();
+  private destroyRef$ = inject(DestroyRef);
   collapsed$ = new BehaviorSubject<boolean>(true);
   @ViewChild("styleInputElement") styleInputElement: ElementRef;
   @ViewChild("fontInputElement") fontInputElement: ElementRef;
@@ -198,7 +200,7 @@ span.theme--dark.sentence__text {
   }
   async ngOnInit() {
     this.wcStylingService.$wcStyleInput
-      .pipe(takeUntil(this.unsubscribe$))
+      .pipe(takeUntilDestroyed(this.destroyRef$))
       .subscribe((css) => {
         if (this.styleText$.getValue().length < 1) {
           this.styleText$.next(css);
@@ -207,10 +209,6 @@ span.theme--dark.sentence__text {
       });
   }
 
-  ngOnDestroy(): void {
-    this.unsubscribe$.next();
-    this.unsubscribe$.complete();
-  }
   openHelpDialog(): void {
     this.dialog.open(WCStylingHelper, {
       width: "80vw",

packages/studio-web/src/app/studio/studio.component.ts

@@ -1,12 +1,20 @@
 import { ShepherdService } from "../shepherd.service";
-import { forkJoin, of, Subject, take, takeUntil } from "rxjs";
+import { forkJoin, of, take } from "rxjs";
 import { Segment } from "soundswallower";
 
-import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import {
+  Component,
+  DestroyRef,
+  inject,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Meta } from "@angular/platform-browser";
 import { MatStepper } from "@angular/material/stepper";
 import { Title } from "@angular/platform-browser";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 
 import {
   createAlignedXML,
@@ -52,9 +60,8 @@ export class StudioComponent implements OnDestroy, OnInit {
   @ViewChild("upload", { static: false }) upload?: UploadComponent;
   @ViewChild("demo", { static: false }) demo?: DemoComponent;
   @ViewChild("stepper") private stepper: MatStepper;
-  unsubscribe$ = new Subject<void>();
-
   private beforeUnload: (e: Event) => void;
+  private destroyRef$ = inject(DestroyRef);
   private route: ActivatedRoute;
   constructor(
     private titleService: Title,
@@ -122,7 +129,7 @@ export class StudioComponent implements OnDestroy, OnInit {
     // Catch and report a catastrophic failure as soon as possible
     this.ssjsService
       .loadModule$()
-      .pipe(takeUntil(this.unsubscribe$))
+      .pipe(takeUntilDestroyed(this.destroyRef$))
       .subscribe({
         error: (err) => {
           this.router.navigate(["error"], {
@@ -138,8 +145,6 @@ export class StudioComponent implements OnDestroy, OnInit {
   async ngOnDestroy() {
     // step us back to the previously left step
     this.studioService.lastStepperIndex = this.stepper?.selectedIndex;
-    this.unsubscribe$.next();
-    this.unsubscribe$.complete();
 
     window.removeEventListener("beforeunload", this.beforeUnload);
   }
@@ -226,7 +231,7 @@ export class StudioComponent implements OnDestroy, OnInit {
     step_one_final_step["buttons"][1]["action"] = () => {
       this.fileService
         .returnFileFromPath$("assets/hello-world.mp3")
-        .pipe(takeUntil(this.unsubscribe$))
+        .pipe(takeUntilDestroyed(this.destroyRef$))
         .subscribe((audioFile) => {
           if (!(audioFile instanceof HttpErrorResponse) && this.upload) {
             this.studioService.$textInput.next("Hello world!");
@@ -315,7 +320,7 @@ export class StudioComponent implements OnDestroy, OnInit {
         this.fileService.readFileAsData$(event[1]), // audio
         of(aligned_xml),
       ])
-        .pipe(takeUntil(this.unsubscribe$))
+        .pipe(takeUntilDestroyed(this.destroyRef$))
         .subscribe((x: any) => {
           this.studioService.b64Inputs$.next(x);
           this.stepper.next();