fix: reduce RxJS imported stuff (#1982)

Author: arturovt

projects/ngx-quill/src/lib/quill-editor.component.spec.ts

@@ -211,7 +211,7 @@ describe('Basic QuillEditorComponent', () => {
     await fixture.whenStable()
     const spy = spyOn(fixture.componentInstance.quillEditor, 'off').and.callThrough()
 
-    fixture.componentInstance.ngOnDestroy()
+    fixture.destroy()
 
     expect(spy).toHaveBeenCalledTimes(3)
     const quillEditor: any = fixture.componentInstance.quillEditor
@@ -1007,7 +1007,7 @@ describe('Advanced QuillEditorComponent', () => {
     fixture.destroy()
 
     expect(quillOffSpy).toHaveBeenCalledTimes(3)
-    expect(editorFixture.componentInstance.subscription).toEqual(null)
+    expect(editorFixture.componentInstance.eventsSubscription).toEqual(null)
     expect(quillOffSpy).toHaveBeenCalledWith('text-change', jasmine.any(Function))
     expect(quillOffSpy).toHaveBeenCalledWith('editor-change', jasmine.any(Function))
     expect(quillOffSpy).toHaveBeenCalledWith('selection-change', jasmine.any(Function))

projects/ngx-quill/src/lib/quill-editor.component.ts

@@ -1,4 +1,4 @@
-import { DOCUMENT, isPlatformServer } from '@angular/common'
+import { isPlatformServer } from '@angular/common'
 import { DomSanitizer } from '@angular/platform-browser'
 
 import type QuillType from 'quill'
@@ -18,7 +18,6 @@ import {
   input,
   NgZone,
   OnChanges,
-  OnDestroy,
   OnInit,
   Output,
   PLATFORM_ID,
@@ -77,7 +76,7 @@ export type EditorChangeContent = ContentChange & { event: 'text-change' }
 export type EditorChangeSelection = SelectionChange & { event: 'selection-change' }
 
 @Directive()
-export abstract class QuillEditorBase implements AfterViewInit, ControlValueAccessor, OnChanges, OnInit, OnDestroy, Validator {
+export abstract class QuillEditorBase implements AfterViewInit, ControlValueAccessor, OnChanges, OnInit, Validator {
   readonly format = input<'object' | 'html' | 'text' | 'json' | undefined>(
     undefined
   )
@@ -142,11 +141,10 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
   onModelTouched: () => void
   onValidatorChanged: () => void
 
-  private subscription: Subscription | null = null
+  private eventsSubscription: Subscription | null = null
   private quillSubscription: Subscription | null = null
 
   private elementRef = inject(ElementRef)
-  private document = inject(DOCUMENT)
 
   private cd = inject(ChangeDetectorRef)
   private domSanitizer = inject(DomSanitizer)
@@ -156,6 +154,15 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
   private service = inject(QuillService)
   private destroyRef = inject(DestroyRef)
 
+  constructor() {
+    this.destroyRef.onDestroy(() => {
+      this.dispose()
+
+      this.quillSubscription?.unsubscribe()
+      this.quillSubscription = null
+    })
+  }
+
   static normalizeClassNames(classes: string): string[] {
     const classList = classes.trim().split(' ')
     return classList.reduce((prev: string[], cur: string) => {
@@ -264,7 +271,8 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
 
       let bounds = this.bounds() && this.bounds() === 'self' ? this.editorElem : this.bounds()
       if (!bounds) {
-        bounds = this.service.config.bounds ? this.service.config.bounds : this.document.body
+        // Can use global `document` because we execute this only in the browser.
+        bounds = this.service.config.bounds ? this.service.config.bounds : document.body
       }
 
       let debug = this.debug()
@@ -490,13 +498,6 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
     }
   }
 
-  ngOnDestroy() {
-    this.dispose()
-
-    this.quillSubscription?.unsubscribe()
-    this.quillSubscription = null
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     if (!this.quillEditor) {
       return
@@ -678,9 +679,9 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
     // `AsyncAction` there w/o triggering change detections. We still re-enter the Angular's zone through
     // `zone.run` when we emit an event to the parent component.
     this.zone.runOutsideAngular(() => {
-      this.subscription = new Subscription()
+      this.eventsSubscription = new Subscription()
 
-      this.subscription.add(
+      this.eventsSubscription.add(
         // mark model as touched if editor lost focus
         fromEvent(this.quillEditor, 'selection-change').subscribe(
           ([range, oldRange, source]) => {
@@ -699,14 +700,14 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
         editorChange$ = editorChange$.pipe(debounceTime(this.debounceTime()))
       }
 
-      this.subscription.add(
+      this.eventsSubscription.add(
         // update model if text changes
         textChange$.subscribe(([delta, oldDelta, source]) => {
           this.textChangeHandler(delta as any, oldDelta as any, source)
         })
       )
 
-      this.subscription.add(
+      this.eventsSubscription.add(
         // triggered if selection or text changed
         editorChange$.subscribe(([event, current, old, source]) => {
           this.editorChangeHandler(event as 'text-change' | 'selection-change', current, old, source)
@@ -716,10 +717,8 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
   }
 
   private dispose(): void {
-    if (this.subscription !== null) {
-      this.subscription.unsubscribe()
-      this.subscription = null
-    }
+    this.eventsSubscription?.unsubscribe()
+    this.eventsSubscription = null
   }
 
   private isEmptyValue(html: string | null) {

projects/ngx-quill/src/lib/quill-view-html.component.ts

@@ -6,6 +6,7 @@ import {
   OnChanges,
   SimpleChanges,
   ViewEncapsulation,
+  inject,
   input,
   signal
 } from '@angular/core'
@@ -33,10 +34,8 @@ export class QuillViewHTMLComponent implements OnChanges {
   readonly innerHTML = signal<SafeHtml>('')
   readonly themeClass = signal('ql-snow')
 
-  constructor(
-    private sanitizer: DomSanitizer,
-    protected service: QuillService
-  ) {}
+  private sanitizer = inject(DomSanitizer)
+  private service = inject(QuillService)
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.theme) {

projects/ngx-quill/src/lib/quill-view.component.ts

@@ -7,10 +7,8 @@ import {
   DestroyRef,
   ElementRef,
   EventEmitter,
-  Inject,
   NgZone,
   OnChanges,
-  OnDestroy,
   Output,
   PLATFORM_ID,
   Renderer2,
@@ -22,7 +20,6 @@ import {
 } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { DomSanitizer } from '@angular/platform-browser'
-import type { Subscription } from 'rxjs'
 import { mergeMap } from 'rxjs/operators'
 
 import { CustomModule, CustomOption, QuillBeforeRender, QuillModules } from 'ngx-quill/config'
@@ -42,7 +39,7 @@ import { QuillService } from './quill.service'
   <div quill-view-element></div>
 `,
 })
-export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class QuillViewComponent implements AfterViewInit, OnChanges {
   readonly format = input<'object' | 'html' | 'text' | 'json' | undefined>(
     undefined
   )
@@ -62,19 +59,14 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
   quillEditor!: QuillType
   editorElem!: HTMLElement
 
-  private quillSubscription: Subscription | null = null
-
+  private elementRef = inject(ElementRef)
+  private renderer = inject(Renderer2)
+  private ngZone = inject(NgZone)
+  private service = inject(QuillService)
+  private sanitizer = inject(DomSanitizer)
+  private platformId = inject(PLATFORM_ID)
   private destroyRef = inject(DestroyRef)
 
-  constructor(
-    public elementRef: ElementRef,
-    protected renderer: Renderer2,
-    protected zone: NgZone,
-    protected service: QuillService,
-    protected domSanitizer: DomSanitizer,
-    @Inject(PLATFORM_ID) protected platformId: any,
-  ) { }
-
   valueSetter = (quillEditor: QuillType, value: any): any => {
     const format = getFormat(this.format(), this.service.config.format)
     let content = value
@@ -84,7 +76,7 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
       if (format === 'html') {
         const sanitize = [true, false].includes(this.sanitize()) ? this.sanitize() : (this.service.config.sanitize || false)
         if (sanitize) {
-          value = this.domSanitizer.sanitize(SecurityContext.HTML, value)
+          value = this.sanitizer.sanitize(SecurityContext.HTML, value)
         }
         content = quillEditor.clipboard.convert({ html: value })
       } else if (format === 'json') {
@@ -112,7 +104,7 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
       return
     }
 
-    this.quillSubscription = this.service.getQuill().pipe(
+    const quillSubscription = this.service.getQuill().pipe(
       mergeMap((Quill) => this.service.beforeRender(Quill, this.customModules(), this.beforeRender()))
     ).subscribe(Quill => {
       const modules = Object.assign({}, this.modules() || this.service.config.modules)
@@ -130,7 +122,7 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
       }
 
       let formats = this.formats()
-      if (!formats && formats === undefined) {
+      if (formats === undefined) {
         formats = this.service.config.formats ? [...this.service.config.formats] : (this.service.config.formats === null ? null : undefined)
       }
       const theme = this.theme() || (this.service.config.theme ? this.service.config.theme : 'snow')
@@ -139,7 +131,7 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
         '[quill-view-element]'
       ) as HTMLElement
 
-      this.zone.runOutsideAngular(() => {
+      this.ngZone.runOutsideAngular(() => {
         this.quillEditor = new Quill(this.editorElem, {
           debug,
           formats,
@@ -169,10 +161,7 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
         this.onEditorCreated.emit(this.quillEditor)
       })
     })
-  }
 
-  ngOnDestroy(): void {
-    this.quillSubscription?.unsubscribe()
-    this.quillSubscription = null
+    this.destroyRef.onDestroy(() => quillSubscription.unsubscribe())
   }
 }

projects/ngx-quill/src/lib/quill.service.ts

@@ -1,6 +1,5 @@
-import { DOCUMENT } from '@angular/common'
 import { inject, Injectable } from '@angular/core'
-import { defer, firstValueFrom, forkJoin, from, isObservable, Observable, of } from 'rxjs'
+import { defer, forkJoin, isObservable, Observable, of } from 'rxjs'
 import { map, shareReplay, tap } from 'rxjs/operators'
 
 import {
@@ -16,30 +15,33 @@ import {
 export class QuillService {
   readonly config = inject(QUILL_CONFIG_TOKEN) || { modules:defaultModules } as QuillConfig
 
-  private document = inject(DOCUMENT)
-
   private Quill!: any
 
   private quill$: Observable<any> = defer(async () => {
     if (!this.Quill) {
-      // Quill adds events listeners on import https://github.com/quilljs/quill/blob/develop/core/emitter.js#L8
-      // We'd want to use the unpatched `addEventListener` method to have all event callbacks to be run outside of zone.
-      // We don't know yet if the `zone.js` is used or not, just save the value to restore it back further.
-      const maybePatchedAddEventListener = this.document.addEventListener
-      // There're 2 types of Angular applications:
-      // 1) zone-full (by default)
-      // 2) zone-less
-      // The developer can avoid importing the `zone.js` package and tells Angular that he/she is responsible for running
-      // the change detection by himself. This is done by "nooping" the zone through `CompilerOptions` when bootstrapping
-      // the root module. We fallback to `document.addEventListener` if `__zone_symbol__addEventListener` is not defined,
-      // this means the `zone.js` is not imported.
-      // The `__zone_symbol__addEventListener` is basically a native DOM API, which is not patched by zone.js, thus not even going
-      // through the `zone.js` task lifecycle. You can also access the native DOM API as follows `target[Zone.__symbol__('methodName')]`.
-      this.document.addEventListener =
-        this.document['__zone_symbol__addEventListener'] ||
-        this.document.addEventListener
+      // Quill adds event listeners on import:
+      // https://github.com/quilljs/quill/blob/develop/core/emitter.js#L8
+      // We want to use the unpatched `addEventListener` method to ensure all event
+      // callbacks run outside of zone.
+      // Since we don't yet know whether `zone.js` is used, we simply save the value
+      // to restore it later.
+      // We can use global `document` because we execute it only in the browser.
+      const maybePatchedAddEventListener = document.addEventListener
+      // There are two types of Angular applications:
+      // 1) default (with zone.js)
+      // 2) zoneless
+      // Developers can avoid importing the `zone.js` package and inform Angular that
+      // they are responsible for running change detection manually.
+      // This can be done using `provideZonelessChangeDetection()`.
+      // We fall back to `document.addEventListener` if `__zone_symbol__addEventListener`
+      // is not defined, which indicates that `zone.js` is not imported.
+      // The `__zone_symbol__addEventListener` is essentially the native DOM API,
+      // unpatched by zone.js, meaning it does not go through the `zone.js` task lifecycle.
+      document.addEventListener =
+        document['__zone_symbol__addEventListener'] ||
+        document.addEventListener
       const { Quill } = await import('./quill')
-      this.document.addEventListener = maybePatchedAddEventListener
+      document.addEventListener = maybePatchedAddEventListener
       this.Quill = Quill
     }
 
@@ -54,11 +56,14 @@ export class QuillService {
       )
     })
 
-    return firstValueFrom(this.registerCustomModules(
-      this.Quill,
-      this.config.customModules,
-      this.config.suppressGlobalRegisterWarning
-    ))
+    // Use `Promise` directly to avoid bundling `firstValueFrom`.
+    return new Promise(resolve => {
+      this.registerCustomModules(
+        this.Quill,
+        this.config.customModules,
+        this.config.suppressGlobalRegisterWarning
+      ).subscribe(resolve)
+    })
   }).pipe(
     shareReplay({
       bufferSize: 1,
@@ -80,9 +85,9 @@ export class QuillService {
     // so it operates individually per component. If no custom module needs to be
     // registered and no `beforeRender` function is provided, it will emit
     // immediately and proceed with the rendering.
-    const sources = [this.registerCustomModules(Quill, customModules)]
+    const sources: (Observable<any> | Promise<any>)[] = [this.registerCustomModules(Quill, customModules)]
     if (beforeRender) {
-      sources.push(from(beforeRender()))
+      sources.push(beforeRender())
     }
     return forkJoin(sources).pipe(map(() => Quill))
   }