refactor(component): use RenderScheduler as a service (#3493)

modules/component/spec/core/render-scheduler.spec.ts

@@ -1,13 +1,40 @@
-import { createRenderScheduler } from '../../src/core/render-scheduler';
+import {
+  createRenderScheduler,
+  RenderScheduler,
+} from '../../src/core/render-scheduler';
 import { NoopTickScheduler } from '../../src/core/tick-scheduler';
 import { MockChangeDetectorRef } from '../fixtures/fixtures';
+import { TestBed } from '@angular/core/testing';
+import { ChangeDetectorRef, Injectable } from '@angular/core';
 
 describe('createRenderScheduler', () => {
+  it('should initialize within injection context', () => {
+    @Injectable({ providedIn: 'root' })
+    class Service {
+      readonly renderScheduler = createRenderScheduler();
+    }
+
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
+      ],
+    });
+
+    const renderScheduler = TestBed.inject(Service).renderScheduler;
+    expect(renderScheduler).toBeInstanceOf(RenderScheduler);
+  });
+
+  it('should throw an error out of injection context', () => {
+    expect(() => createRenderScheduler()).toThrowError();
+  });
+});
+
+describe('RenderScheduler', () => {
   function setup() {
     const cdRef = new MockChangeDetectorRef();
     const tickScheduler = new NoopTickScheduler();
     jest.spyOn(tickScheduler, 'schedule');
-    const renderScheduler = createRenderScheduler({ cdRef, tickScheduler });
+    const renderScheduler = new RenderScheduler(cdRef, tickScheduler);
 
     return { cdRef, renderScheduler, tickScheduler };
   }

modules/component/spec/types/push.pipe.types.spec.ts

@@ -6,9 +6,9 @@ describe('PushPipe', () => {
       import { Observable } from 'rxjs';
       import { PushPipe } from '@ngrx/component';
 
-      const anyVal = {} as any;
-      const pushPipe = new PushPipe(anyVal, anyVal, anyVal);
-      const value = pushPipe.transform(anyVal as ${potentialObservableType});
+      const unknownVal: unknown = {};
+      const pushPipe = unknownVal as PushPipe;
+      const value = pushPipe.transform(unknownVal as ${potentialObservableType});
     `
   );
 

modules/component/src/core/render-scheduler.ts

@@ -1,22 +1,19 @@
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, inject, Injectable } from '@angular/core';
 import { TickScheduler } from './tick-scheduler';
 
-export interface RenderScheduler {
-  schedule(): void;
-}
-
-export interface RenderSchedulerConfig {
-  cdRef: ChangeDetectorRef;
-  tickScheduler: TickScheduler;
-}
+@Injectable()
+export class RenderScheduler {
+  constructor(
+    private readonly cdRef: ChangeDetectorRef,
+    private readonly tickScheduler: TickScheduler
+  ) {}
 
-export function createRenderScheduler(
-  config: RenderSchedulerConfig
-): RenderScheduler {
-  function schedule(): void {
-    config.cdRef.markForCheck();
-    config.tickScheduler.schedule();
+  schedule(): void {
+    this.cdRef.markForCheck();
+    this.tickScheduler.schedule();
   }
+}
 
-  return { schedule };
+export function createRenderScheduler(): RenderScheduler {
+  return new RenderScheduler(inject(ChangeDetectorRef), inject(TickScheduler));
 }

modules/component/src/let/let.directive.ts

@@ -1,5 +1,4 @@
 import {
-  ChangeDetectorRef,
   Directive,
   ErrorHandler,
   Input,
@@ -13,9 +12,8 @@ import {
   ObservableOrPromise,
   PotentialObservable,
 } from '../core/potential-observable';
-import { createRenderScheduler } from '../core/render-scheduler';
+import { RenderScheduler } from '../core/render-scheduler';
 import { createRenderEventManager } from '../core/render-event/manager';
-import { TickScheduler } from '../core/tick-scheduler';
 
 type LetViewContextValue<PO> = PO extends ObservableOrPromise<infer V> ? V : PO;
 
@@ -103,7 +101,10 @@ export interface LetViewContext<PO> {
  *
  * @publicApi
  */
-@Directive({ selector: '[ngrxLet]' })
+@Directive({
+  selector: '[ngrxLet]',
+  providers: [RenderScheduler],
+})
 export class LetDirective<PO> implements OnInit, OnDestroy {
   private isMainViewCreated = false;
   private isSuspenseViewCreated = false;
@@ -114,10 +115,6 @@ export class LetDirective<PO> implements OnInit, OnDestroy {
     $complete: false,
     $suspense: true,
   };
-  private readonly renderScheduler = createRenderScheduler({
-    cdRef: this.cdRef,
-    tickScheduler: this.tickScheduler,
-  });
   private readonly renderEventManager = createRenderEventManager<
     LetViewContextValue<PO>
   >({
@@ -182,11 +179,10 @@ export class LetDirective<PO> implements OnInit, OnDestroy {
   >;
 
   constructor(
-    private readonly cdRef: ChangeDetectorRef,
-    private readonly tickScheduler: TickScheduler,
     private readonly mainTemplateRef: TemplateRef<LetViewContext<PO>>,
     private readonly viewContainerRef: ViewContainerRef,
-    private readonly errorHandler: ErrorHandler
+    private readonly errorHandler: ErrorHandler,
+    private readonly renderScheduler: RenderScheduler
   ) {}
 
   static ngTemplateContextGuard<PO>(

modules/component/src/push/push.pipe.ts

@@ -1,15 +1,8 @@
-import {
-  ChangeDetectorRef,
-  ErrorHandler,
-  OnDestroy,
-  Pipe,
-  PipeTransform,
-} from '@angular/core';
+import { ErrorHandler, OnDestroy, Pipe, PipeTransform } from '@angular/core';
 import { Unsubscribable } from 'rxjs';
 import { ObservableOrPromise } from '../core/potential-observable';
 import { createRenderScheduler } from '../core/render-scheduler';
 import { createRenderEventManager } from '../core/render-event/manager';
-import { TickScheduler } from '../core/tick-scheduler';
 
 type PushPipeResult<PO> = PO extends ObservableOrPromise<infer R>
   ? R | undefined
@@ -39,10 +32,7 @@ type PushPipeResult<PO> = PO extends ObservableOrPromise<infer R>
 @Pipe({ name: 'ngrxPush', pure: false })
 export class PushPipe implements PipeTransform, OnDestroy {
   private renderedValue: unknown;
-  private readonly renderScheduler = createRenderScheduler({
-    cdRef: this.cdRef,
-    tickScheduler: this.tickScheduler,
-  });
+  private readonly renderScheduler = createRenderScheduler();
   private readonly renderEventManager = createRenderEventManager({
     suspense: (event) => this.setRenderedValue(undefined, event.synchronous),
     next: (event) => this.setRenderedValue(event.value, event.synchronous),
@@ -60,11 +50,7 @@ export class PushPipe implements PipeTransform, OnDestroy {
   });
   private readonly subscription: Unsubscribable;
 
-  constructor(
-    private readonly cdRef: ChangeDetectorRef,
-    private readonly tickScheduler: TickScheduler,
-    private readonly errorHandler: ErrorHandler
-  ) {
+  constructor(private readonly errorHandler: ErrorHandler) {
     this.subscription = this.renderEventManager
       .handlePotentialObservableChanges()
       .subscribe();